(转自星光博客)罗宾主题的原特效，鼠标经过时不会转身，也没有如图所示的绿影效果。(此代码适用于任何主题，适当修改类即可)
在原来的基础上，你可以看到，它是通过在Style.css文件中添加以下几行代码来实现的。
第一步是在Style.css中添加以下代码
/**头像旋转的效果**/ .avatar{ -webkit-transition:.s; -webkit-transition:-webkit-transform .s ease-out; transition:transform .s ease-out; -moz-transition:-moz-transform .s ease-out; } .avatar:hover{ transform:rotateZ(deg); -webkit-transform:rotateZ(deg); -moz-transform:rotateZ(deg); }第二步，在Style.css中找到下面的代码，直接用新代码覆盖。
(注:鸟哥的主题可以直接放到后台自定义风格图，方便。评论图像的大小和时间可以通过查看来更改。图像好像有点小，可以自己看着改)
旧代码:
.vcard .avatar { float: left; width: px; height: px; margin: px px ; padding: px; border-radius: px; border: px solid #ddd; transition: all .s ease s; }直接替换为以下新代码。
.vcard .avatar { box-shadow:px px px; float: left; width: px; height: px; margin: px px ; padding: px; border: px solid #ddd; transition: all .s ease s; -webkit-transition: all .s ease s; -moz-transition: all .s ease s; -o-transition: all .s ease s; -ms-transition: .s; } .vcard:hover .avatar { box-shadow:px px px #c; transform: rotate(deg); -webkit-transform: rotate(deg); -moz-transform: rotate(deg); -o-transform: rotate(deg); -ms-transform: rotate(deg); border-radius:px!important; filter:alpha(opacity=)!important; opacity:!important; }文章来源:堆爱博客http://duai . cc/comments-round-the-heads-add-rotation-effects . html/comment-page-/# comments
作者：徐州百都网络 | 来源： | 发布于：2022-03-25 00:38:39