HTML+CSS动画波纹效果和奔跑的⼤熊
动画概念
动画（animation）是CSS3中具有颠覆性的特征之⼀，可通过设置多个节点来控制⼀个或⼀组动画。常⽤来实现复杂的动画效果。相⽐过渡，动画可以实现更多变化，更多控制，连续⾃动播放等效果。
动画的使⽤
定义动画：使⽤@keyframes定义动画
语法：
@keyframes 动画名称{
%0{
}
100%{
}
}
动画序列
0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
动画使元素从⼀种样式逐渐变化为另⼀种样式的效果，可以改变任意多的样式，任意多的次数
⽤百分⽐来规定动画发⽣的时间，或⽤关键词from和to，等同于0%和100%
使⽤动画
div{
animation-name：动画名称
animation-duration：持续时间
}
动画的属性
属性描述
@keyframes定义动画
animation所有动画属性的简写属性，除了animation-play-state属性
css特效文字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还有pause
animation-fill-mode规定动画结束后状态，保持forwards，回到起始backwards
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画开始或结束状态简写属性⾥不包含animation-play-state
暂停动画animation-play-state经常和⿏标经过等其他配合使⽤
想要动画⾛回来，⽽不是直接跳回来，animation-direction：alternate
盒⼦动画结束后，停在结束位置：animation-fill-mode：forwards
动画案例
案例1： 实现波纹效果
<html>
<head>
<title>demo3</title>
<style>
body {
background-color: #333;
}
.map {
position: relative
}
.city {
position: absolute;
top: 300px;
right: 50%
}
.
dotted {
width: 8px;
height: 8px;
background-color: #0099ff;
border-radius: 50%;
}
.city div[class^='pulse'] {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation-name: pulse;
animation-duration: 1.2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {}
70% {
width: 40px;
height: 40px;
opacity: 1;
}
width: 70px;
height: 70px;
opacity: 0;
}
}
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.8s;
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html>
案例2：实现奔跑的⼤熊
基本思路：如下图所⽰⼀张图⽚上有8个不同状态的⼤熊，每个⼤熊的宽度⼤约是160px，我们定义⼀个宽为160px的div盒⼦，然后把这个图⽚作为盒⼦的背景图⽚，然后通过动画控制背景图⽚的位置，每次向左移动⼀个⼤熊的的位置，所以8个⼤熊（背景图⽚的总宽度）分为8次移动结束。这⾥需要制定animation-timing-function的属性为steps(8)，这样连续起来就像⼤熊在奔跑⼀样。然后我们再定义⼀组盒⼦移动的动画。让盒⼦从左边移动到右边。多组动画⽤逗号分隔。
<html>
<head>
<title>demo3</title>
<style>
body {
background-color: #000;
}
.bear {
position: absolute;
width: 160px;
height: 80px;
top: 50%;
transform: translateY(-50%);
background: url(./bear-25676f9.png) no-repeat;
animation: bear 1s steps(8) infinite, move 5s linear infinite;
}
@keyframes bear {
0% {
background-position: 0 0;
}
}
100% {
background-position: -1280px 0;            }
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 100%
}
}
div:nth-child(2) {
animation-delay: 1s;
animation-duration: 2.5s;
}
div:nth-child(3){
animation-delay: 2s;
animation-duration: 2s;
}
div:nth-child(4){
animation-delay: 3s;
animation-duration: 1s;
}
div:last-child {
animation-delay: 4s;
}
</style>
</head>
<body>
<div class="bear"></div>
<div class="bear"></div>
<div class="bear"></div>
<div class="bear"></div>
<div class="bear"></div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。