动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;
除了名字、动画时间、延时，有严格顺序要求其它随意。
声明动画
@keyframes 动画名称 {
from { 开始位置 }
to { 结束 }
}
或者
@keyframes 动画名称 {
0% { 开始位置 }
100% { 结束 }
}
animation-iteration-count:infinite; 无限循环播放 默认是1次
animation-direction： alternate 动画应该轮流反向播放 默认是 normal
animation-play-state:paused; 暂停动画"
案例：
效果图
其中太阳由两个不同背景透明度的盒子组成，进行了缩放和阴影的动画；大海由两个图片组成，进行了移动的动画。
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #0EA9B1;
overflow: hidden;
}
img {
width: 100%;
height: auto;
position: absolute;
bottom: 0;
left: 0;
}
img:first-child {
/*调用动画*/
animation: move 2s linear infinite;
}
img:last-child {
/*调用动画*/
animation: move 2s linear 0.3s infinite;
}
.sun {
width: 100px;
height: 100px;
margin: 100px;
position: relative;
}
.sun::before,
.sun::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
/*调用动画*/
animation: sun 2s infinite;
}
.sun::after {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.6);
/*调用动画*/
animation: sun 3s infinite;
}
/* 声明动画 */
@keyframes move {
0% {
bottom: 0;
}
50% {
bottom: -50px;
}
100% {
bottom: 0;
}
}
@keyframes sun {
0% {
transform: translate(-50%, -50%) scale(1);
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);
}
50% {
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.7);
}
100% {
transform: translate(-50%, -50%) scale(1);
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);
}
}
</style>
</head>
<body>
<div class="sun"></div>
<img src="images/1.png" height="211" width="2000" alt="">
<img src="images/2.png" height="211" width="2000" alt="">
</body>
</html>
网友评论