html_css模拟端午赛龙舟运动

这篇具有很好参考价值的文章主要介绍了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>

背景图和龙舟的布局
html_css模拟端午赛龙舟运动

💖 添加龙舟

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

html_css模拟端午赛龙舟运动

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

效果如下
html_css模拟端午赛龙舟运动

inscode的代码如下

⭐结束

本文分享结束!
💖感谢你的阅读💖
如有更好的意见欢迎指出!
html_css模拟端午赛龙舟运动文章来源地址https://www.toymoban.com/news/detail-507850.html

到了这里,关于html_css模拟端午赛龙舟运动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML5+CSS3模拟实现《亮剑》平安县城一役精彩微信群聊-谁开的炮?

    转眼从2005年到现在,《亮剑》已经播出多年,但热度依然不减,而且每次重温我都会看出不一样的意蕴,今天,我就用 HTML5+CSS3 模拟实现《亮剑》平安县城一役精彩 微信群聊 -谁开的炮? 目录 1. 实现思路 2. 素材介绍 3. 微信群聊顶部 + 底部 + 聊天区域实现 4. 聊天区域的实现

    2024年02月02日
    浏览(45)
  • 【数学建模】基于matlab模拟单摆运动

     ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,代码获取、论文复现及科研仿真合作可私信。 🍎个人主页:Matlab科研工作室 🍊个人信条:格物致知。 更多Matlab完整代码及仿真定制内容点击👇 智能优化算法       神经网络预测       雷达通信       无

    2024年04月10日
    浏览(44)
  • 用微信小游戏实现龙舟大战-打粽子

    端午节来啦!各位c粉有没有吃粽子啊! 端午节来啦!今天沉默带大家来做个关于端午节的小游戏,我的设计思路是用龙舟打粽子,类似于飞机大战,只不过我们的场景是在河中。源码在文章后获取哟! 提示:以下是本篇文章正文内容,下面案例可供参考 下面是小游戏的开发

    2024年02月09日
    浏览(42)
  • (运动会模拟射靶)Python期末大作业(附完整文档)

           python期末大作业,因为是数据分析与可视化,所以我在网上搜索的时候,找到了一篇关于大作业射靶的题目,原文写的很好,也提供了下载,本篇在其基础上增加了数据可视化-图表,并且增加了,方差,个人平均分在内的多个计算内容,并制作了完整的文档,可供提

    2024年02月09日
    浏览(84)
  • HTML&CSS(二)---HTML常见标签

             HTML标题标签用于定义文档中的标题和子标题。HTML提供了六个级别的标题,分别是 h1 到 h6 ,其中 h1 表示最高级别的标题, h6 表示最低级别的标题。这些标签通常用于创建内容结构,帮助搜索引擎和读者理解文档的重要性和层次结构。 下面是标题标签的示例: 在

    2024年04月16日
    浏览(40)
  • RobotStudio的基本布局方法,模型加载,工件坐标系的创建,手动操作机器人示教,以及模拟仿真机器人运动轨迹。

    1、在文件功能选项卡中,选择【空工作站】,单击【创建】,创建一个新的工作站。 2、在【基本】功能选项卡中,打开【ABB模型库】,选择【IRB2600】。 3、设定好数值,然后单击【确认】。 4、在【基本】功能选项里,打开【导入模型库】—【设备】,选择【myTool】。 5、右

    2023年04月08日
    浏览(222)
  • 前端基础HTML、CSS--6(CSS-3)

    1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性、继承性、优先级。 1.1层叠性 相同选择器给设置相同的样式 ,此时一个样式就会 覆盖(层叠) 另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则: ·样式冲突,遵循的是 就近原则 ,哪个样式离结构近

    2023年04月08日
    浏览(47)
  • html作业天气查询界面(html+css)

    目录 一、作业要求 二、题目分析 三、最终演示 四、代码 五、心得 利用百度主页的天气查询程序实现一个可以实时查询武汉市天气的静态页面 提示:获取天气数据的地址为(http://www.baidu.com/home/other/data/weatherInfo?city=武汉), (该网站返回一个json对象)界面要求如下图。

    2024年02月11日
    浏览(41)
  • 制作一个简单HTML静态网页(HTML+CSS)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年02月03日
    浏览(79)
  • HTML+CSS+JS 学习笔记(一)———HTML(中)

    🌱博客主页:大寄一场. 🌱系列专栏:前端 🌱前期回顾:HTML+CSS+JS 学习笔记(一)———HTML(上) 😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注 ​ 目录  字符实体  段落 段落标签 段落的换行标签  段落的原格式标签  水平线 水平线标签 ​编辑 水平线标签的宽度  图像

    2023年04月16日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包