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>

背景图和龙舟的布局

💖 添加龙舟

使用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的代码如下

⭐结束

本文分享结束!

💖感谢你的阅读💖

如有更好的意见欢迎指出!


目录
相关文章
|
6月前
|
前端开发
css_animation运动的贝塞尔曲线
css_animation运动的贝塞尔曲线
30 0
|
前端开发 JavaScript
使用CSS实现 图片帧动画 与 曲线运动
使用CSS实现 图片帧动画 与 曲线运动
598 0
使用CSS实现 图片帧动画 与 曲线运动
|
Web App开发 JavaScript
《HTML5+JavaScript动画基础》——1.2 帧与运动
自然,这是有代价的。随着系统变得越来越大,规则变得越来越复杂,电脑必须能够迅速地计算出下一份图像描述,并将其显示出来。如果你想保持一定的帧率,那么给予电脑的处理时间(毫秒级)就极其有限。如果电脑无法及时完成计算,帧率就会下降
1796 0
|
前端开发
css 运动背景
css 运动背景原理: animation-name: bgmove;animation-duration: 100s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: infinite; animation介绍: 属性 描述 animation 指定定义所有动画属性(除了 animation-play-state 外)的速记值。
868 0
|
2月前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
48 1
|
2月前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
31 0
|
2天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
15 1
[HTML、CSS]细节与使用经验
|
3天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
14 1
[HTML、CSS]知识点