html_css模拟端午赛龙舟运动-编程知识

html_css模拟端午赛龙舟运动

文章目录

- ⭐前言
- - 💖 样式布局
  - 💖 添加龙舟
  - 💖 添加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>

背景图和龙舟的布局
background

💖 添加龙舟

使用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>

boat

💖 添加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>