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

孤狼
孤狼
孤狼
171
文章
115
评论
更多
2019年4月5日21:59:322623,234 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.     float: left;
  3.     width: 64px;
  4.     height: 64px;
  5.     margin: 7px 10px 0 0;
  6.     padding: 3px;
  7.     border-radius: 5px;
  8.     border: 1px solid #ddd;
  9.     transition: all 0.8s ease 0s;
  10. }
此处为隐藏的内容
发表评论并刷新，方可查看
评论
继续阅读
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
孤狼
  • 本文由 发表于 2019年4月5日21:59:32
  • 除非特殊声明，本站文章均为原创，转载请务必保留本文链接
【新年气象】过年啦WordPress 主题添加挂灯笼特效 WordPress

【新年气象】过年啦WordPress 主题添加挂灯笼特效

过年挂灯笼是中国的一个习俗，家里挂灯笼，自己博客也是自己的家，当然也要挂一个了。代码这里也分享一下，有喜欢的朋友拿去用，将灯笼挂在自己的博客上，增加点过年的气氛。这个灯笼只是简单应...
2020年1月23日15,91966
匿名

发表评论

匿名网友 填写信息

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

评论：26   其中：访客  25   博主  1
    • 你好啊 你好啊
      2023年2月21日 17:07 25楼
      回复

      以前退一步海阔天空，现在退一步蹬鼻子上脸。

      • 7976 7976
        2022年8月21日 22:03 24楼
        回复

        世界上最动听的话，不是我爱你，而是你的肿瘤是良性的！

        • 我完全 我完全
          2022年6月22日 14:48 23楼
          回复

          早睡早起身体好，不是一是啊句口号，而是三个愿望。

          • 王小优 王小优
            2020年10月30日 13:05 22楼
            回复

            战无不胜，攻无不克—-【战国策·齐策】

            • 优秀 优秀
              2020年10月12日 10:00 21楼
              回复

              一骑红尘妃子笑，无人知是荔枝来—-【唐·杜牧·过华清宫绝句】