文章目录
- ⭐前言
- 💖 样式布局
- 💖 添加龙舟
- 💖 添加css_animation运动
- ⭐结束
⭐前言
大家好，我是yma16，本期给大家分享css实现赛龙舟运动。
💖 样式布局
风格：卡通
首先采用一张包括水元素的照片作为背景
<!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>
💖 添加css_animation运动
水平移动
@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;
}完整的代码如下
<!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;
animation-name: move;
animation-duration: 12s;
animation-iteration-count: infinite;
transform: translateY(80vh);
opacity: 1;
color: #fff;
}
.li-boat {
height: 300px;
width: 300px;
background: url(./boat.png);
background-repeat: no-repeat;
background-size: cover;
}
@keyframes move {
from {
transform: translateX(0vh);
}
to {
transform: translateX(150vh);
}
}
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;
}
.title{
width:auto;
height: 50px;
text-align: center;
margin: 0 auto;
color: rgb(89, 114, 189);
background: #fff;
font-size: 32px;
font-weight: bold;
}
</style>
</head>
<body>
<div class='title'>
<img src="boat.png" height="30px"/>端午节赛龙舟活动<img src="boat.png" height="30px"/>
</div>
<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>效果如下
inscode的代码如下
⭐结束
本文分享结束！
💖感谢你的阅读💖
如有更好的意见欢迎指出！
