【WordPress 教程】知更鸟主题给评论头像添加旋转变圆特效

孤狼
171
文章
94
评论
2019年4月5日21:59:32 20 16,782 2035字阅读6分47秒
摘要

知更鸟主题原来的特效在鼠标经过的时候是并不会变成圆的,也没有如图显示的绿色阴影效果。在原来的基础如你所见,是在Style.css文件添加了以下几行代码实现的。

【用户中心】

第一步,首先在Style.css中添加以下代码
  1. /**用户中心头像旋转的效果**/
  2. .avatar{
  3.    -webkit-transition:0.4s;
  4.    -webkit-transition:-webkit-transform 0.4s ease-out;
  5.    transition:transform 0.4s ease-out;
  6.    -moz-transition:-moz-transform 0.4s ease-out;
  7. }
  8. .avatar:hover{
  9.    transform:rotateZ(360deg);
  10.    -webkit-transform:rotateZ(360deg);
  11.    -moz-transform:rotateZ(360deg);
  12. }

评论头像】

第二步,在Style.css中查找以下代码并用新代码直接覆盖。
  1. .vcard .avatar {
  2.     floatleft;
  3.     width64px;
  4.     height64px;
  5.     margin7px 10px 0 0;
  6.     padding3px;
  7.     border-radius: 5px;
  8.     border1px solid #ddd;
  9.     transition: all 0.8s ease 0s;
  10. }
此处为隐藏的内容!
发表评论并刷新,方可查看
继续阅读
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
  • 本文由 发表于 2019年4月5日21:59:32
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

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

评论:20   其中:访客  19   博主  1
    • L. L.

      男儿有泪不轻弹,只因未到伤心处—-【元·李开先·宝剑记】

      • 123123 123123

        森岛帆高

        • qd qd

          爱所有人,信任少数人,不负任何人。— 莎士比亚

          • 啊杀杀杀 啊杀杀杀

            爱所有人,信任少数人,不负任何人。— 莎士比亚

            • 空壳 空壳

              世上本无所谓好和坏,思想使然。— 莎士比亚

              • 李野 李野

                质胜文则野,文胜质则史,文质彬彬,然后君子。— 孔子

                • aaa aaa

                  666厉害了

                  • 都地方撒地方 都地方撒地方

                    君子和而不同,小人同而不和。— 孔子

                    • ls ls

                      从来如此,便对么?— 鲁迅