注意事项
- 对于transform属性不能跟animation同时使用,否则默认执行animation帧动画,transform属性无用
- 可以利用i标签实现跟div相同的功能,不过注意要转化成盒子模型,即display:blocak
- 对于实现有些动画,可以使用同一种样式,通过设置不同的延迟时间产生不同的效果
- animation有一个属性step()表示每一帧的间隔时间
利用百分比宽度对父子关系设置重复个数样式比较方便
用法如下:捕鱼游戏的简单设计
- 先将如图所示的图片插入进去
- 通过每次动画调用不同的坐标实现鱼的移动。
html代码
<div class="shark">
<div class="sharkfish"></div>
</div>
css代码
.shark{
width: 509px;
height: 270px;
animation: pao 20s linear infinite;
}
@keyframes pao {
from{transform:translatex(-600px);} /*表示鱼从左到右出来的动画*/
to{transform: translatex(2000px);}
}
.sharkfish{
width: 509px;
height: 270px;
background:url("./img/shark1.png") no-repeat;
animation: active 1s steps(8) infinite; /*step表示每一帧的间隔时间是帧动画每间隔8sj即暂停8s通过坐标的变化调用不同位置上相同样式的鱼*/
}
@keyframes active {
from{} /*表示不同坐标鱼出来的动画*/
to{background-position: left -2160px;}
}
*其实是视觉差效果,不是一个鱼在动。而是帧动画每间隔8sj即暂停8s通过坐标的变化调用不同位置上相同样式不同摆动幅度的鱼。
先旋转后移动和先移动后旋转的差别
- 先移动后旋转不需要考虑坐标系的变化,
- 先旋转后移动的话因为旋转后整体的坐标系会发生变化,所以需要考虑,本来移动的坐标轴可能已经发生改变。
例如:
transform: rotatey(90deg) translatez(200px);
transform: translatex(200px) rotatey(90deg) ;
以上两种写法效果一样,
对于第1种因为沿y轴旋转后z.x 都发生变化,z轴旋转到原来x轴位置,所以要实现同样的效果需要沿z轴平移。
伪类的悬停调用方法:before前面有两个点
.block:hover .i_1::before{
height: 100%;
}