学习CSS3动画animation得先了解一些关于变形transform、过渡transition的知识这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-、-moz-、-ms-、-o-),本文为简化内容,直接使用了原版属性根据不同属性的支持度,在实际使 ...
学习CSS3动画animation得先了解一些关于变形transform、过渡transition的知识
这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-、-moz-、-ms-、-o-),本文为简化内容,直接使用了原版属性
根据不同属性的支持度,在实际使用的时候需要添加相应的浏览器前缀支持
目录:
- 变形transform
- 过渡transition
- 动画animation
一、变形transform
变形有rotate旋转、scale缩放、translate位移、skew倾斜、matrix矩阵变形、perspective透视几种操作,通过例子来了解各个操作
1. 初始页面结构
<style type="text/css"> html { font-family: Arial; } .box { position: relative; margin: 200px auto; width: 100px; height: 20px; text-align: center; border: 1px solid #ddd; background-color: #75e275; cursor: pointer; } .left, .right { position: absolute; top: -10px; width: 10px; height: 40px; background-color: #4d8aeb; } .left { left: 0; } .right { right: 0; } .box:hover { transform: rotate(-30deg); } </style>
原标题:CSS3的变形transform、过渡transition、动画animation学习
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。