用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); }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏帮你学MatLab

期刊图片的输出

期刊图片 下载地址:http://www.mathworks.se/matlabcentral/fileexchange/727 也可在文后下载 详细介绍见...

37810
来自专栏儿童编程

Processing雁群实验

本文利用Processing完成一个3D随机渲染案例。由于最终动画效果像大雁群徘徊飞舞,我为其取名“雁群实验”。 为了简化说明,我们先用一个正方体旋转做说明,...

2023
来自专栏V站

PHP头像九宫格合并 案例

1973
来自专栏Coco的专栏

【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

2425
来自专栏前端菜鸟变老鸟

setTimeout定时器以及部分小知识点

思路:加一个标记flag,开始执行之后改变flag为原来的值并启动定时器,暂停的时候改变flag的值。

702
来自专栏Coco的专栏

【Web动画】SVG 实现复杂线条动画

2065
来自专栏码生

StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle 等

StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle...

4752
来自专栏Petrichor的专栏

Jupyter

When attempt to download .ipynb file as .python file:

6953
来自专栏听雨堂

MapX中实现友好的交互

        MapX的标注,修改标注功能尽管都有,但都十分的难用,操作起来,用户体验非常糟糕。不光编程难以控制,操作起来也不方便:工具选择要不断的切换,移动...

2037
来自专栏一场梦

PHP头像九宫格合并 案例

1677

扫码关注云+社区

领取腾讯云代金券