admin管理员组文章数量:1794759
transition
现在的网页上特别多的动画效果，这里做个小小的记录也是自己学到的一些小的动画效果。一个很简单的鼠标移上去DIV缓慢放大的效果
#box{width: 80px;height: 80px;background-color: #007AFF;transition:all 1.2s;margin: 100px auto;
}
#box:hover{transition:all 1.2s;transform: scale(1.5, 1.5);
}<body><div id='box'></div>
</body>
会缓慢的变大
转场效果用特别简单的一个css属性来完成（感觉CSS好厉害。），那些看起来特别炫酷高大上的效果其实就是个transition属性，这里详细可以参照W3，一般用的语法就是写出动画属性以及时间
一般我习惯全加上
-moz-transition: all 0.6s;-o-transition: all 0.6s;-webkit-transition: all 0.6s;transition: all 2.6s;
这是考虑兼容性问题也可以就写transition: all 2.6s;之后就可以再用transform给div或者各类元素写出位置或者效果
这里给大家吧他的所有效果写出来，大家可以去这里参考效果，当然他们也可以组合来用，也可以用hover来实现效果
transform: none 定义不进行转换。 测试
transform: matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 测试
transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
transform: translate(x,y) 定义 2D 转换。 测试
transform: translate3d(x,y,z) 定义 3D 转换。
transform: translateX(x) 定义转换，只是用 X 轴的值。 测试
transform: translateY(y) 定义转换，只是用 Y 轴的值。 测试
transform: translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
transform: scale(x,y) 定义 2D 缩放转换。 测试
transform: scale3d(x,y,z) 定义 3D 缩放转换。
transform: scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试
transform: scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试
transform: scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
transform: rotate(angle) 定义 2D 旋转，在参数中规定角度。 测试
transform: rotate3d(x,y,z,angle) 定义 3D 旋转。
transform: rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
transform: rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
transform: rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试
transform: skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 测试
transform: skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 测试
transform: skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 测试
transform: perspective(n) 为 3D 转换元素定义透视视图。 测试
就先记录到这里吧。这个效果可以组合到一起来进行更多复杂的动画。
本文标签： Transition
版权声明：本文标题：transition 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1692966560a227540.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论