CSS特效 | 给你的网站LOGO设置一个好看的特效

【摘要】摘要:给你的网站LOGO设置一个装逼的特效吧!只需要简单的几行CSS代码,添加以后就能看到效果啦!下面小东就带领大家一起独领风骚~来啊~互相伤害啊~首先介绍一下使用方法:1.复制下面介绍的特效代码;2.粘贴到贵站的主要cs...

摘要:给你的网站LOGO设置一个装逼的特效吧!只需要简单的几行CSS代码,添加以后就能看到效果啦!下面小东就带领大家一起独领风骚~来啊~互相伤害啊~

首先介绍一下使用方法:

 1.复制下面介绍的特效代码;

 2.粘贴到贵站的主要css文件中;(使用本主题的,可用自带的主题设置中添加自定义css即可)

 3.保存,然后上传覆盖原有css文件;(注意记得备份)

 4.打开你的网站,鼠标移动到LOGO上,即可查看特效!

开车啦!快上车!:

代码一LOGO左右晃动特效:

.logo:hover {
-webkit-animation:dyboy 1s .1s ease both;
-moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes dyboy {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.8) rotate(-2deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(2deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-2deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}
代码二LOGO扫光特效:


.logo:hover::before {
  -webkit-transition: left .8s;
  -moz-transition: left .8s;
  transition: left .8s;
  left: 480px;
}


代码三LOGO旋转特效:

.logo:hover {
   -webkit-transform:rotate(720deg);
   -moz-transform:rotate(720deg);
   -o-transform:rotate(720deg);
   transform:rotate(720deg);
}


以上代码本站测试可用,小伙伴们在尝试的时候可以尝试更改前面的类名以适配自己的网站。

更多的网站CSS特效持续更新中!!!


 小东
 简介:专业团队网站开发、安全运维,合作意向请联系!

扫码关注微信公众号:ITDYBOY,学前端,学安全,从0到1,从1到精通!

扫码关注微信公众号:ITDYBOY

发表评论

游客
送你一朵小花花~

帅人已评(14)

本屌使用,无任何特效,这是为何
LV 3 古韵博客 8年前 (2017-02-11) 回复
@古韵博客:你把鼠标移到本站LOGO看看~
站长已认证 小东 8年前 (2017-02-11) 回复
@小东:不知为何。我的博客就是没卵用
LV 3 古韵博客 8年前 (2017-02-11) 回复
@古韵博客:可以看看你的LOGO的div类是啥,然后把.logo进行适当修改!
站长已认证 小东 8年前 (2017-02-11)