案例:图片 - 指定时间、 旋转、变形

老白 7个月前 275浏览 0评论

 图片指定时间旋转变形.gif 案例:图片 - 指定时间、 旋转、变形 CSS学习

上图这个让图片在指定时间内 旋转变形的常用语各种网站的头像或者图标上,特别是zblogPHP模板里很多开发者喜欢用,所以今天来分享下:

先看完整代码,然后再逐一说明:

.commentlist img{width:40px;height:40px;position:relative;float:left;margin:4px 16px 0 0;padding:2px;border:1px solid #ddd;background:#fff;-webkit-transition:.8s;-moz-transition:.8s;-o-transition:.8s;-ms-transition:.8s}

.commentlist img:hover{transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);-ms-transform:rotate(720deg);border-radius:23px}

width:40px;height:40px; 高度与宽度

position:relative;相对定位

float:left; 居左

margin:4px 16px 0 0; 上下左右外间距

padding:2px; 图片与border之间的内间距

重点:-webkit-transition:.8s;-moz-transition:.8s;-o-transition:.8s;-ms-transition:.8s  —— 0.8秒内动画

重点:transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);-ms-transform:rotate(720deg);  —— 旋转720度

重点:border-radius:23px 变形为圆角23px







评论