代码部署
方法一:(Begin主题5.2版)
后台→外观→编辑→样式表 (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;
- }
知更鸟Begin主题用户,直接用下面的代码覆盖上面的代码:
效果图
方法二:(Begin主题LTS版)
直接复制放到:后台的主题选项 - 定制风格 - 自定义样式
- /**评论头像旋转的效果**/
- .vcard .avatar {
- box-shadow:0px 0px 1px;
- float: left;
- width: 64px;
- height: 64px;
- margin: 6px 10px 0 0;
- padding: 2px;
- border: 1px solid #ddd;
- transition: all 0.6s ease 0s;
- -webkit-transition: all 0.6s ease 0s;
- -moz-transition: all 0.6s ease 0s;
- -o-transition: all 0.6s ease 0s;
- -ms-transition: 0.6s;
- }
- .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;
- }
- .avatar{
- -webkit-transition:0.2s;
- -webkit-transition:-webkit-transform 0.2s ease-out;
- transition:transform 0.2s ease-out;
- -moz-transition:-moz-transform 0.2s ease-out;
- }
- .avatar:hover{
- transform:rotateZ(360deg);
- -webkit-transform:rotateZ(360deg);
- -moz-transform:rotateZ(360deg);
- }
方法三:(转自路人博客)
评论栏里的头像使用的是默认的avatar样式,找到主题目录下Style.css,在最下面添加如下css样式代码即可。(IE浏览器暂不支持旋转,chrome支持)
首先设置头像是圆形
- .avatar{
- /*设置圆形*/
- -webkit-transition: .8s;-moz-transition: .8s;-o-transition: .8s;-ms-transition: .8s;padding: 2px;border: 1px solid #ddd;background: #fff}
增加旋转动画效果
- .avatar:hover{
- /*旋转动画*/
- transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);-o-transform: rotate(720deg);-ms-transform: rotate(720deg);border-radius: 30px!important}
编辑保存好后,ctrl+F5刷新网页,效果应该就有了。
若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
2021年11月25日 20:46 61楼
萨达萨达是阿达
2023年2月19日 20:04 62楼
看,nb!