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

一点优化 2019年12月25日21:18:53
评论
941看 1355字
广告也精彩

(转自星光博客)知更鸟主题原来的特效在鼠标经过的时候是并不会变成圆的,也没有如图显示的绿色阴影效果。(此代码适用于任何主题,行适当修改class就行)
在原来的基础如你所见,是在Style.css文件添加了以下几行代码实现的。
wordpress知更鸟主题给评论头像添加旋转变圆特效wordpress知更鸟主题给评论头像添加旋转变圆特效
第一步,首先在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;
}

文章参考来源:堆爱博客 http://duiai.cc/comments-round-the-heads-add-rotation-effects.html/comment-page-3/#comments

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
修改WordPress数据库前缀完后台无法登陆教程 WP综合教程

修改WordPress数据库前缀完后台无法登陆教程

一点优化操作完上一个如何修改WordPress数据库前缀修改完之后,发现网站后台无法登陆了,百思不得其姐,然后在百度的帮助下,解决了这个问题,后续的教程请看下面。 如果你将数据库导入到运营中的服务器登...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

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