css3学习下

lm1622

于 2016-10-09 17:27:18 发布

阅读量193

点赞数

分类专栏： html 文章标签： transform css3 h5

本文链接：https://blog.csdn.net/lm1622/article/details/52768814

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天逛网页发现一个比较有趣的动画效果
参考地址http://www.webhek.com/css-checkbox
发现展示的是checkbox的动画效果。于是我随便也学习了下
css 的一些动画效果
先说下
box-shadow：h-shadow v-shadow blur spread color inset;
h-shadow——水平移动
v-shadow——垂直移动
blur ——–模糊距离
样式

.test-shadow{
    width: 200px;
     height: 100px;
     box-shadow:15px 14px 5px #aaaaaa;
     margin-bottom: 20px;
}

 <div class="test-shadow"></div>

形成后的图片

transform: 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
比如我定义
transform：scale(x,y) 2D的缩放或者scaleX(x)，scaleY(y) scaleZ(z)单独定义进行x,y,z轴的转换
transform：rotate(angle) 以中心点顺时针转动