⭐前言
大家好，我是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的代码如下
⭐结束
本文分享结束！
💖感谢你的阅读💖
如有更好的意见欢迎指出！
