用到的方法:
动画 Animation
+ @keyframes
注意:animation属性要与keyframes规则进行绑定
CSS3 创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。当用@keyframes
创建动画时,需要把它绑定到一个选择器(例如div),否则动画不会有任何效果。
动画属性
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画的简写属性 |
animation-name | 规定@keyframes 动画的名称 |
animation-duration | 规定动画完成一个周期所花费的时间,默认0 |
animation-timing-function | 规定动画速度曲线,默认是“ease” |
animation-fill-mode | 规定当动画不播放时(当动画完成时或当动画有一个延迟为开始播放时)要用到的元素样式 |
animation-dispaly | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1 |
animation-direction | 规定动画是否在下一周期逆向播放,默认是“normal” |
animation-play-state | 规定动画是否正在运行或暂停,默认是“running” |
animation-timing-function规定速度曲线的参数
值 | 描述 |
---|---|
linear | 动画从头到尾速度相同 |
ease | 默认。低速开始——加快——结束变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
实例
效果图
变换前
变换中
变换后
doem
<div class="background"></div>
<style>
.background{
width: 100%;
height: 100vh;
animation: move 10s linear infinite; /*自定义动画名称*/
/*!move:动画名称,10s:执行时间
ease:执行的函数,infinite:代表执行次数,这里指无限次*!*/
}
@keyframes move {
/**注意这几个图片大小一定要一样,否则会出现抖动现象*/
/*这里的0%50%100%是相对于执行时间的,最后一个图片先播放*/
0%{
background: url('/static/image/img2.png') no-repeat;
background-size:100% 100%;
}
50%{
background: url('/static/image/img1.jpg') no-repeat;
background-size:100% 100%;
}
100%{
background: url('/static/image/img3.jpg') no-repeat;
background-size:100% 100%;
}
}
</style>