知更鸟Begin主题给关于本站头像添加旋转变圆特效

2019年8月5日08:17:37 6 491 views 961字阅读3分12秒

我们都知道知更鸟Begin主题自带的效果功能中,关于本站里的头像当鼠标挪过去是不会发生旋转的,也没有如图显示的绿色阴影效果。好久没有逛站长的博客了,今天闲来无事看到了这么一个效果,就是当鼠标挪动到关于本站里的图片时,图片会发生宣传特效,感觉还是挺不错的,所以就马上迫不及待想分享给朋友们。

知更鸟Begin主题给关于本站头像添加旋转变圆特效

此文章在孤狼博客里有看到,如果大家想知道详细教程也可以去孤狼博客里看看,至于效果的话叶忠文就不截图了,大家可以在叶忠文博客的首页里看到。好了话不说,我们就进入教程详解吧。

很简单,就是将以下代码加到知更鸟Begin主题下的根目录下的Style.css文件里:

【关于本站效果教程】

   /*关于本站头像旋转特效*/
    #feed_widget > div > div.about-main > div.about-img > img{
    box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度)*/
    -moz-transition: -moz-transform 0.4s ease-out;
    }
    #feed_widget > div > div.about-main > div.about-img > img:hover{/*设置鼠标悬浮在头像时的CSS样式*/
    box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
    -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
    transform: rotateZ(360deg);/*图像旋转360度*/
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg); }

欢迎喜欢折腾的朋友们尽情折腾!

叶先生
  • 本文由 发表于 2019年8月5日08:17:37
如何替换WordPress博客的自定义栏目值 WordPress

如何替换WordPress博客的自定义栏目值

我们都知道如果之前添加的自定义栏目值,例如说:附件或者图片链接的地址发生改变,修改起来都是比较麻烦的。好久没进鸟哥的官网看了,今天进去看到这么一个教程感觉挺实用的,里面有篇文章讲到附件或者图片链接的地...
WordPress网站如何更换域名的详细教程讲解 WordPress

WordPress网站如何更换域名的详细教程讲解

WordPress网站如何更换域名?使用WordPress主题建站这么长时间以来,见过很多站长不停的更换网站域名,但不会更换里面的内容。其实这个方法不算新颖,因为在这个方法之前,鸟哥的Begin主题里...
修改数据库密码后导致网站无法打开该怎么解决? 网站建设

修改数据库密码后导致网站无法打开该怎么解决?

今天无缘无故不知道发什么癫,一时兴起,想统一下阿里后台的登录密码,接着把FTP密码也给重置了遍,后面想了下,要不就把数据库密码也统一下吧。统一好了后方才发现网站打不开了,顿时有点百思不得其解,以前用织...
WordPress如何实现多域名访问同一站点 WordPress

WordPress如何实现多域名访问同一站点

有些时候总有人会有这样一个要求,就是希望自己所搭建的WordPress网站,能够通过多个域名访问同一站点,关于目的我们不得而知。有可能是利用一个灰帽的手法,这种手法类似301重定向,将多个域名访问同一...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:6   其中:访客  3   博主  3
    • 去看你博客 去看你博客 来自天朝的朋友 Safari浏览器 iPhone iPhone OS 12_2 like Mac OS X) AppleWebKit 中国 移动 1

      可以折腾折腾。

        • Joson Joson 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 电信

          回复 去看你博客 你折腾的很不错

        • wordpress建站吧 wordpress建站吧 来自天朝的朋友 谷歌浏览器 Windows 10 四川省宜宾市 移动 3

          好博客就是折腾出来的

          • 凉城博客0x0 凉城博客0x0 来自天朝的朋友 QQ浏览器 Windows 7 天津市 电信 0

            感谢分享