• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

案例：图片 - 指定时间、 旋转、变形_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

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。