博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
设置WordPress评论头像为圆角鼠标触碰后旋转效果
阅读量:2429 次
发布时间:2019-05-10

本文共 1045 字,大约阅读时间需要 3 分钟。

方法很简单,在/wp-content/themes/目录下,找到你当前使用的主题的文件夹,进入后,找到style.css,将下面的代码复制后,粘贴到style.css文件的最下面,然后保存即可:

.avatar{float:left;margin-right:8px;padding:1px;border:1px solid #cfd9e1;width:40px;height:40px; /*设置图像的长和宽*/   border-radius: 20px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/   -webkit-border-radius: 20px;/*圆角效果:兼容webkit浏览器*/   -moz-border-radius:20px;   box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/   -webkit-box-shadow: inset 0 -1px 0 #3333sf;   -webkit-transition: 0.4s;       -webkit-transition: -webkit-transform 0.4s ease-out;   transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度)*/   -moz-transition: -moz-transform 0.4s ease-out;   }    .avatar:hover{/*设置鼠标悬浮在头像时的CSS样式*/   box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   transform: rotateZ(360deg);/*图像旋转360度*/   -webkit-transform: rotateZ(360deg);   -moz-transform: rotateZ(360deg); }

上面是我使用的设置,修改的时候,可以根据上面绿色的注释进行修改,比如头像的大小,旋转的角度,时间等等

转载地址:http://wtnmb.baihongyu.com/

你可能感兴趣的文章
redis深度历险学习笔记--基础与应用篇
查看>>
单链表翻转
查看>>
检查表达式中的括号是否匹配
查看>>
一道关于 goroutine 的面试题
查看>>
信号量的使用方法
查看>>
RabbitMQ(1): docker-compose安装rabbitmq及简单使用Hello World
查看>>
is-a,has-a,like-a是什么
查看>>
简单工厂、工厂、抽象工厂的对比
查看>>
J2EE的体系架构——J2EE
查看>>
对于关系型数据库中的索引的基本理解
查看>>
索引,主键,唯一索引,联合索引的区别
查看>>
剪桌腿的最小代价
查看>>
Zookeeper原理架构
查看>>
利用ZooKeeper简单实现分布式锁
查看>>
Java过滤器与SpringMVC拦截器之间的关系与区别
查看>>
Java中的String为什么是不可变的?
查看>>
剑指offer二叉搜索树与双向链表
查看>>
LeetCode 81. 搜索旋转排序数组 II(头条)
查看>>
LC 42. 接雨水 + LC 11. 盛最多水的容器
查看>>
腾讯2017 秋招+暑期实习 笔试(编码;构造回文;字符移位;有趣的数字)
查看>>