animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D变形之大海波涛</title>
<link rel="shortcut icon" href="favicon.ico" />
<style type="text/css">
*{
padding: 0;
margin: 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 infinite;
}
.sun{
height: 100px;
width: 100px;
margin: 100px;
position: relative;
}
.sun:before,.sun:after{
content: "";
height: 50px;
width: 50px;
background-color: rgba(255,255,255,0.8);
position: absolute;
/*盒子居中对齐*/
left: 50%;
top: 50%;
border-radius: 50%;
animation: sun 2s infinite;
}
.sun:after{
height: 80px;
width: 80px;
background-color: rgba(255,255,255,0.6);
animation: sun 3s infinite;
}
/*声明动画 关键帧 @keyframes 动画名称{}*/
@keyframes move{
0%{
bottom: 0;
}
50%{
bottom: -50px;
}
100%{
bottom: 0;
}
}
@keyframes sun{
0%{
transform: translate(-50%,-50%) scale(1);
/*阴影效果 box-shadow: 水平 垂直 羽化范围 颜色*/
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="img/1.png"/>
<img src="img/2.png"/>
</body>
</html>