首先采用一张包括水元素的照片作为背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>annimation</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
background: url(./background.jpg);
background-repeat: no-repeat;
background-size: cover;
display: grid;
grid-template: 1fr/1fr;
}
</style>
</head>
<body>
</body>
</html>背景图和龙舟的布局
使用ul的li元素配置龙舟属性添加龙舟图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>annimation</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
background: url(./background.jpg);
background-repeat: no-repeat;
background-size: cover;
display: grid;
grid-template: 1fr/1fr;
}
.box {
margin: 0 auto;
}
ul {
display: block;
position: absolute;
top: 300px;
left:0;
}
li {
text-align: center;
color: #000;
line-height: 80px;
text-transform: uppercase;
height: 80px;
width: 200px;
opacity: 1;
color: #fff;
}
.li-boat {
height: 300px;
width: 300px;
background: url(./boat.png);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class='box'>
<ul>
<li>
<div class="li-boat"></div>
</li>
<li>
<div class="li-boat"></div>
</li>
<li>
<div class="li-boat"></div>
</li>
<li>
<div class="li-boat"></div>
</li>
<li>
<div class="li-boat"></div>
</li>
</ul>
</div>
</body>
</html>
水平移动
@keyframes move {
from {
transform: translateX(0vh);
}
to {
transform: translateX(80vh);
}
}
li:nth-child(1) {
animation-timing-function: ease;
}
li:nth-child(2) {
animation-timing-function: ease-in;
}
li:nth-child(3) {
animation-timing-function: ease-in-out;
}
li:nth-child(4) {
animation-timing-function: ease-out;
}
li:nth-child(5) {
animation-timing-function: linear;
}
