【前端素材】模板-多种实用营销组件.zip资源-CSDN文库

共8个文件

png：5个

html：1个

gif：1个

版权申诉

HTML

前端动画

svg

canvas

66 浏览量 2024-04-04 18:35:51 上传评论收藏 689KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

【前端素材】模板-多种实用营销组件.zip （8个子文件）

营销组件

九宫格.html 4KB

img

begin-btn.e5f51a09.png 8KB

20220613095852.gif 540KB

lottery-bg.42985be1.png 12KB

shake.png 5KB

61800.png 72KB

lottery-bg-top.70dc2d9e.png 19KB

css

index.css 360KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> body { padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; background: rgb(255, 189, 89, .4); } img, svg { vertical-align: middle; } img { border-style: none; } *, :after, :before { box-sizing: border-box; } .con { width: 360px; height: 356px; background-size: contain; position: relative; } .con::after { content: ""; position: absolute; top: 0; left: 0; width: 360px; height: 72px; background: transparent url(./img/lottery-bg-top.70dc2d9e.png) 50% no-repeat; background-size: contain; } .box { position: relative; background: transparent url('img/lottery-bg.42985be1.png') no-repeat; height: 320px; width: 320px; background-size: contain; margin: 36px auto 0; } .box-inner { width: 100%; height: 100%; margin-top: 0; padding: 31px 29px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } .inner-item { width: 84px; height: 84px; margin-right: 3px; position: relative; margin-bottom: 3px; background: #fefdf7; -webkit-box-shadow: inset 0 0 18px 0 #ffbd59; box-shadow: inset 0 0 18px 0 #ffbd59; border-radius: 13px; } .inner-item-icon { width: 100%; } .inner-item-draw { cursor: pointer; position: relative; width: 84px; height: 84px; background: url('./img/begin-btn.e5f51a09.png') no-repeat; background-size: 100% 100%; } .inner-item-draw::after { z-index: 99; content: " "; position: absolute; right: -27px; bottom: -34px; width: 62px; height: 63px; background: url('./img/shake.png') no-repeat; background-size: contain; -webkit-animation: shake .5s ease-in-out infinite both; animation: shake .5s ease-in-out infinite both; } @-webkit-keyframes shake { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(1.1); transform: scale(1.1) } to { -webkit-transform: scale(1); transform: scale(1) } } @keyframes shake { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(1.1); transform: scale(1.1) } to { -webkit-transform: scale(1); transform: scale(1) } } </style> <body> <div class="con"> <div class="box"> <div class="box-inner"> <div class="inner-item"><img src="./img/61800.png" class="inner-item-icon" alt=""></div> <div class="inner-item"><img src="./img/61800.png" class="inner-item-icon" alt=""></div> <div class="inner-item"><img src="./img/61800.png" class="inner-item-icon" alt=""></div> <div class="inner-item"><img src="./img/61800.png" class="inner-item-icon" alt=""></div> <div class="inner-item"> <div class="inner-item-draw"></div> </div> <div class="inner-item"><img src="./img/61800.png" class="inner-item-icon" alt=""></div> <div class="inner-item"><img src="./img/61800.png" class="inner-item-icon" alt=""></div> <div class="inner-item"><img src="./img/61800.png" class="inner-item-icon" alt=""></div> <div class="inner-item"><img src="./img/61800.png" class="inner-item-icon" alt=""></div> </div> </div> </div> </body> <script> </script> </html>

评论收藏

内容反馈

版权申诉