知更鸟主题给评论头像添加旋转变圆特效

少羽.
少羽.
少羽.
418
文章
87
评论
2019年5月10日18:18:11 评论 4,572 1098字阅读3分39秒
广告也精彩

知更鸟主题原来的特效在鼠标经过的时候是并不会变成圆的,也没有如图显示的绿色阴影效果。

在原来的基础如你所见,是在Style.css文件添加了以下几行代码实现的。

知更鸟主题给评论头像添加旋转变圆特效

第一步,首先在Style.css中添加以下代码

/**头像旋转的效果**/
.avatar{
   -webkit-transition:0.4s;
   -webkit-transition:-webkit-transform 0.4s ease-out;
   transition:transform 0.4s ease-out;
   -moz-transition:-moz-transform 0.4s ease-out;
}
.avatar:hover{
   transform:rotateZ(360deg);
   -webkit-transform:rotateZ(360deg);
   -moz-transform:rotateZ(360deg);
}

第二步,在Style.css中查找以下代码并用新代码直接覆盖。

旧代码:

.vcard .avatar {
    float: left;
    width: 64px;
    height: 64px;
    margin: 7px 10px 0 0;
    padding: 3px;
    border-radius: 5px;
    border: 1px solid #ddd;
    transition: all 0.8s ease 0s;
}

用以下新代码直接替换。

.vcard .avatar {
    box-shadow:0px 0px 1px;
    float: left;
    width: 40px;
    height: 40px;
    margin: 6px 10px 0 0;
    padding: 2px;
    border: 1px solid #ddd;
    transition: all 0.8s ease 0s;
    -webkit-transition: all 0.8s ease 0s;
    -moz-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    -ms-transition: 0.8s;
}
.vcard:hover .avatar {
    box-shadow:0px 0px 10px #0c0;
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    border-radius:40px!important;
    filter:alpha(opacity=100)!important;
    opacity:1!important;
}
继续阅读
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
广告也精彩
少羽.
  • 本文由 发表于 2019年5月10日18:18:11
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
WordPress纯代码实现独立相册功能 WordPress

WordPress纯代码实现独立相册功能

其实,这篇文章很早准备发了,一直拖,拖,拖硬生生拖到了现在,今天整合闲着,就更新一下博客吧! 想到这个文章,我忘记发了,今天就补上 hhh 正文 思路是前段时间写模板琢磨出来的,模板写废了,也不准备写...
广告也精彩
匿名

发表评论

匿名网友 填写信息

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