编程技术

Document

html_css模拟端午赛龙舟运动

文章目录

⭐前言

大家好，我是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>

效果如下
在这里插入图片描述

inscode的代码如下

⭐结束

本文分享结束！
💖感谢你的阅读💖
如有更好的意见欢迎指出！
在这里插入图片描述