【摘要】摘要：给你的网站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特效持续更新中！！！

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