给网站加个好玩的pokemon go动画特效

pokemon go现在是真的红了!如果你不知道什么是pokemon go?那建议您点击下面的连接:百度搜索

技术宅今天给大家介绍个好玩的pokemon go动画特效,特效来源:夜游神安卓模拟器

给网站加个好玩的pokemon go动画特效 上图就是加上这个特效的效果,具体自己打开技术宅的首页看看吧!我只放在首页了,毕竟 没啥实质性的用处!

废话不多说了,下面技术宅就给贴出代码!

首先是两个图片素材!

给网站加个好玩的pokemon go动画特效 给网站加个好玩的pokemon go动画特效(希望大家别盗链啊啊啊啊啊啊啊啊)

CSS代码!

/***pipitexiao**/
@-webkit-keyframes pipipika {
	15%,5% {
	-webkit-transform:translateY(-20px);
	animation-timing-function:cubic-bezier(.25,0,1,.25)
}
10%,20% {
	-webkit-transform:translateY(0)
}
}@-moz-keyframes pipipika {
	15%,5% {
	-moz-transform:translateY(-20px);
	animation-timing-function:cubic-bezier(.25,0,1,.25)
}
10%,20% {
	-moz-transform:translateY(0)
}
}@keyframes pipipika {
	15%,5% {
	transform:translateY(-20px);
	animation-timing-function:cubic-bezier(.25,0,1,.25)
}
10%,20% {
	transform:translateY(0)
}
}.pikago,.pikago-kr {
	position:fixed;
	right:140px;
	top:56%;
	display:inline-block;
	width:115px;
	height:73px;
	z-index:10000
}
.pikago-kr {
	position:absolute;
	right:20px;
	top:16px
}
.pikago-kr-title {
	font-size:14px;
	position:absolute;
	width:127px;
	top:84px;
	right:-9px;
	color:#fccd01
}
.pipipika {
	animation:pipipika 3s cubic-bezier(0,.25,.25,1) infinite;
	-webkit-animation:pipipika 3s cubic-bezier(0,.25,.25,1) infinite;
	-moz-animation:pipipika 3s cubic-bezier(0,.25,.25,1) infinite
}
.lang-kr .pikago {
	display:none
}

其中的相关定位视自己网站的情况而定呢!

PHP代码!

<a class="pikago" href="" target="_blank">
                <img class="pipipika" src="<?php echo THEME_URI.'/images/pika.png'; ?>" style="position: absolute;top: -68px;left: 18px;">
            <img src="<?php echo THEME_URI.'/images/pikapika.png'; ?>" style="position: absolute;">
        </a>

注意这里的

<?php echo THEME_URI.'/images/pika.png'; ?>

表示上面的两个图片素材放在主题根目录下的images文件夹内!

然后保存为php或者直接在需要的地方引用!效果是不是很炫!

最好自己定义个相应式之类的。技术宅有个想法,换成二维码展示微信公章帐号或者QQ公众帐号,效果是不是更爽呢?这个大家自行琢磨,我就不折腾了,有愿意折腾的成功了告诉我!

技术分享

手把手教你申请QQ公众帐号,公众空间

2016-7-26 21:59:56

技术分享

免费申请腾讯云证书GeoTrust DV SSL G3证书

2016-8-9 23:53:52

    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索