简介
one div :一个有趣的网站。通过css做出来一些有趣的动画。对于网站来说,尽量压缩加载内容十分有必要,而用css代替图片无疑是加快网站访问速度的利器。
用法
- 旋转动画
@keyframes fan{
from{
transform: rotate(0deg);
}
to{
transform: rotate(720deg);
}
}
用
@keyframes
定义动画,后面跟动画名,类似于定义函数。from和to分别对应0%和100%的帧。
transform 是变换函数,可对元素的大小、角度等属性进行设置。
#demo{
position: relative;
border-radius: 30%;
left:90px;
top:90px;
width: 400px;
height: 400px;
background-color: red;
animation: fan 2s infinite;
}
animation引用定义过的动画。参数有一下几个:
animation: name duration timing-function delay iteration-count direction;
name 即为动画名,duration为执行时间,timing-function为动画速度曲线,delay为动画执行之前的延迟时间,iteration-count为动画播放次数(n或infinite),direction为播放方向(normal为重复执行,而alternate为往复执行)。
- 直线动画
@keyframes move{
from{
left: 0;
}
to{
left: 150px;
}
}
- 缩放动画
@keyframes scale{
from{
transform:scale(1);
}
to{
transform:scale(2);
}
}