1667天 博客通用头像 Edwiin

本人熟练掌握linux,windows的开关机,擅长nfs,samba,ftp,dhcp,bind,apache,mail等各项服务的安装与卸载,精通shell,mysql,iptables,selinux等单词的拼写,了解虚拟化,存储,集群等相关汉字的书写。

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

发布于 4年前 / 1.7k 次围观 / 2 条评论 / 网站源码 / Edwiin
本文最后更新于2017-2-11,已超过 1 个月没有更新,如果文章内容或图片资源失效,请【留言反馈】,我会及时处理,谢谢!

摘要给你的网站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);
}

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

全站顶部广告位

  • 支付宝赞助图片
  • 微信赞助图片
  • QQ赞助图片
头像
描述: 还好有你,再见如初。
  1. 3年前 (2017-08-07)
    图片标签呀 @

  2. 4年前 (2017-02-14)
    图片标签呀 @

    厉害厉害

Press Space to start