html_css模拟端午赛龙舟运动-阿里云开发者社区

html_css模拟端午赛龙舟运动

2024-04-25 7

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>