专栏首页WindCoder用CSS让头像动起来

用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 条评论
登录 后参与评论

相关文章

  • 摄氏温度——华氏温度对照表

    #include <stdio.h> #include <stdlib.h> #include <math.h> int main(void) { i...

    WindCoder
  • friend关键字使用之员工和经理类-C++

    WindCoder
  • 寻找次大元素

    WindCoder
  • 详解Android应用main函数的调用

    Activity启动过程的一环是调用ActivityStackSupervisor.startSpecificActivityLocked,如果App所在进程还...

    砸漏
  • C/C++逗号运算符

    Qt君
  • Bitmovin视频开发者报告回顾

    https://cdn2.hubspot.net/hubfs/3411032/Premium%20Content%20PDF%20Files%20-%20whi...

    LiveVideoStack
  • 2d转换缩放与旋转

    ## 本章将介绍简单的2d缩放的实现,并且举几个简单的应用案例。 No.1缩放属性

    用户8247415
  • [记录点滴]OpenResty 支持http v2的问题

    错误现象:无法上传图片,后台log是http v2 not supported yet。

    罗西的思考
  • Nginx1.10.2稳定版本tcp四层负载安装配置过程略解

    nginx1.10.2(2016.10.18)是最新稳定版,适合线上运行,最新开发版为1.11.8(2016.12.27)

    三杯水Plus
  • Nginx服务实践

    注意下载页面最好选择稳定版:http://nginx.org/en/download.html

    陈雷雷

扫码关注云+社区

领取腾讯云代金券