老雷html/css开发视频教程之动画与变换
一、变换 transform
1.transform设置或检索对象的转换
none: 无转换
rotate():2D旋转
scale(): 2D缩放
skew() 斜切扭曲,第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
2.transform-origin 设置或检索对象以某个原点进行转换。
该属性提供2个参数值想x,y
如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。
{transform-origin:0 0;}
<percentage>: 用百分比指定坐标值。可以为负值。
<length>: 用长度值指定坐标值。可以为负值。
left: 指定原点的横坐标为left
center: 指定原点的横坐标为center
right: 指定原点的横坐标为right
top: 指定原点的纵坐标为top
bottom: 指定原点的纵坐标为bottom
3.transform-style:flat | preserve-3d
指定某元素的子元素是(看起来)位于三维空间内,还是在该元素所在的平面内被扁平化。
二、过渡 transition
检索或设置对象变换时的过渡
.box2{
-webkit-transition:
background-color 3s ease-in,
border 3s ease-in 1s;
transform: rotate(10deg);
}
<' transition-property '>: 检索或设置对象中的参与过渡的属性
设置对象中的参与过渡的属性,如果提供多个属性值,以逗号进行分隔
<' transition-duration '>: 检索或设置对象过渡的持续时间
<' transition-timing-function '>: 检索或设置对象中过渡的动画类型
linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start: 等同于 steps(1, start)
step-end: 等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?):
接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
<' transition-delay '>: 检索或设置对象延迟过渡的时间
三、animation 动画
.ani1{
animation:opacity 2s ease-out 2s infinite normal;
}
<' animation-name '>: 检索或设置对象所应用的动画名称
@keyframes opacity{
}
<' animation-duration '>: 检索或设置对象动画的持续时间,如:1s
<' animation-timing-function '>: 检索或设置对象动画的过渡类型,同transition
<' animation-delay '>: 检索或设置对象动画延迟的时间,如:1s
<' animation-iteration-count '>: 检索或设置对象动画的循环次数
infinite:无限循环
<number>:1 指定对象动画的具体循环次数
<' animation-direction '>: 检索或设置对象动画在循环中是否反向运动
normal: 正常方向
reverse: 反方向运行
alternate: 动画先正常运行再反方向运行,并持续交替运行
alternate-reverse: 动画先反运行再正方向运行,并持续交替运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动画</title> <style> @keyframes opacity{ 0%{transform:translate(0) rotate(30deg);opacity:0;background-color: red;} 50%{transform:translate(30px) rotate(60deg);opacity:1;} 70%{transform:translate(35px);opacity:1;} 100%{transform:translate(60px);opacity:0;} } .box,.box2,.box3{ width:100px; height: 100px; background-color: #00A0E9; margin: 10px; } .box2{ -webkit-transition: background-color 3s ease-in, border 3s ease-in 1s; transform: rotate(10deg) scale(.5) skew(5deg,10deg) ; transform-origin: 10px 20px; } .box2:hover{ background-color: #F35757; border:10px solid #eee; } .box3{ animation:opacity 2s ease-out 0s infinite; animation-direction: alternate-reverse; } .cube { position: relative; font-size: 80px; width: 2em; margin: 1.5em auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-30deg) rotateY(30deg); transform: rotateX(-30deg) rotateY(30deg); } .cube > div { position: absolute; width: 2em; height: 2em; background: rgba(0, 0, 0, .1); border: 1px solid #999; color: white; text-align: center; line-height: 2em; } .front { -webkit-transform: translateZ(1em); transform: translateZ(1em); } .top { -webkit-transform: rotateX(90deg) translateZ(1em); transform: rotateX(90deg) translateZ(1em); } .right { -webkit-transform: rotateY(90deg) translateZ(1em); transform: rotateY(90deg) translateZ(1em); } .left { -webkit-transform: rotateY(-90deg) translateZ(1em); transform: rotateY(-90deg) translateZ(1em); } .bottom { -webkit-transform: rotateX(-90deg) translateZ(1em); transform: rotateX(-90deg) translateZ(1em); } .back { -webkit-transform: rotateY(-180deg) translateZ(1em); transform: rotateY(-180deg) translateZ(1em); } </style> </head> <body> <div class="box"></div> <div class="box2"></div> <div class="box3"></div> <div class="cube"> <div class="front">1</div> <div class="back">2</div> <div class="right">3</div> <div class="left">4</div> <div class="top">5</div> <div class="bottom">6</div> </div> </body> </html>