CSS 内容总结
1.动画的基本使用
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果
-
先定义动画
用@keyframes定义动画(类似定义类选择器)
@keyframes 动画名称{ 0%{ width:100px; } 100%{ width:200px; } } /*from to 也可*/ @keyframes 动画名称{ from{ width:100px; } to{ width:200px; } }
-
再使用(调用)动画
div{ animation-name:动画名称; animation-duration:持续时间s; }
@keyframes move {
0% {
transform: translate(100px, 0);
}
100% {
transform: translate(1000px, 0);
}
}
.box {
animation-name: move;
animation-duration: 2s;
width: 200px;
height: 200px;
background-color: rgb(30, 156, 97);
transition: all 1s;
/* transform-origin: left bottom; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
2.动画序列
可以做多个状态的变化
@keyframes 动画名称{
0%{
width:100px;
}
25%{
width:200px;
}
50%{
width:300px;
}
75%{
width:200px;
}
100%{
width:100px;
}
}
3.动画常用属性
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性,除了animation-play-state属性 |
animation-name | 规定@keyframes动画的名称(必须) |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒,默认是0.(必须) |
animation-timing-function | 规定动画的速度曲线,默认是ease |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite循环播放 |
animation-direction | 规定动画是否在下一周期逆向播放,默认是normal,alternate逆向播放 |
animation-play-state | 规定动画是否正在运行或暂停。默认是“running”,还有“paused” |
animation-fill-mode | 规定动画结束后状态,保持forwards,回到起始backwards |
animation-timing-function 规定动画的速度曲线,默认是ease :
steps():搭配 white-space:nowrap、overflow:hidden 实现打字机效果
4.动画属性简写
animaton:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
animaton:move 2s linear 0s infinite alternate forwards
5.综合案例
-
大数据热点图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @keyframes move { 0% { width: 6px; height: 6px; opacity: 1; } 70% { width: 40px; height: 40px; opacity: .5; } 100% { width: 70px; height: 70px; opacity: 0; } } .box { position: relative; width: 702px; height: 521px; background: url(img/dsj.png) no-repeat; margin: auto; } .box .city { position: absolute; top: 188px; right: 198px; color: #fff; } .city .dian { width: 6px; height: 6px; border-radius: 50%; background-color: #09f; } .city div[class^='a'] { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; box-shadow: 0 0 12px #09f; animation: move 1s linear infinite; } .city div.a_second { animation-delay: .4s; } .city div.a_third { animation-delay: .8s; } .box .tw { top: 410px; right: 107px; } .box .gz { top: 445px; right: 199px; } </style> </head> <body> <div class="box"> <div class="city"> <div class="dian"></div> <div class="a_first"></div> <div class="a_second"></div> <div class="a_third"></div> </div> <div class="tw city"> <div class="dian"></div> <div class="a_first"></div> <div class="a_second"></div> <div class="a_third"></div> </div> <div class="gz city"> <div class="dian"></div> <div class="a_first"></div> <div class="a_second"></div> <div class="a_third"></div> </div> </div> </body> </html>
-
奔跑的大熊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } @keyframes move { from { background-position: 0 0; } to { background-position: -1600px 0; } } @keyframes move2 { from { transform: translate(0, 0); } to { transform: translate(90%, 0); } } body { background-color: rgb(218, 132, 132); } div { position: relative; width: 400px; height: 100px; background: url(img/20200609222052986.png)no-repeat; overflow: hidden; animation: move .4s steps(4) infinite, move2 3s ease forwards; } </style> </head> <body> <div></div> </body> </html>