2019-04-15
2D变形
旋转效果： transform:rotate
transform:rotate(7deg);/*沿中心点旋转7度*/
transform:rotateX(7deg);/*沿X轴旋转7度*/
transform:rotateY(7deg);/*沿Y轴旋转7度*/
transform:rotate3D(1,1,1,7deg);/*3D旋转7度，x、y、z为三维向量，沿该轴转动则为1，否则为0。最后一个参数是旋转的角度*/
扭曲效果： transform:skew
设置元素扭曲变形。第一个参数是水平方向扭曲角度;第二个参数是垂直方向扭曲角度(可选)，如果没有设置则和X轴一样。
transform:skew(15deg,25deg);
注意：rotate函数只是旋转，而skew函数可以使元素变形。
缩放效果： transform:scale
可以使用倍数关系进行尺寸缩放控制。
transform:scale(1.2);
位移效果： transform:translate
定义元素位移。第一个参数设置水平偏移；第二个参数设置垂直偏移。
transform:translate(30px,30px);
CSS动画
使用transition属性实现过渡效果
<style type="text/css">
h1{
width: 300px;
margin: 300px 300px;
background-color: blueviolet;
transition: transform 1s;
}
h1:hover{
transform: scale(1.2) rotate(180deg);
}
</style>
<body>
<h1>大会结束</h1>
</body>
<!-- 在一秒内将h1旋转180度放大两倍 -->
使用@keyframes制作自定义动画
@keyframes（关键帧）属性可以在不使用JavaScript的情况下实现元素的动画效果。
用法1：
@keyframes 动画名称{
from {属性名:属性值}
to {属性名:属性值}
}
用法2：
@keyframes 动画名称{
0% {属性名:属性值}
25% {属性名:属性值}
50% {属性名:属性值}
75% {属性名:属性值}
100% {属性名:属性值}
}
@keyframes动画必须通过animation属性调用
animation:动画名称 动画执行时间 动画循环次数(infinite无限循环) 执行速度;
执行速度参数：
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
网友评论