vue实现水族馆鱼儿游动效果代码
代码语言:html
所属分类:动画
代码描述:vue实现水族馆鱼儿游动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> button { position: absolute; z-index: 2; margin: 1rem; font-size: 1.2rem; padding: 0.5rem 1rem; font-family: sans-serif; cursor: pointer; background: #009dff60; box-shadow: 0 0 0.25rem 0; border: 4px solid #009dff; border-radius: 4px; } button:hover { background: #009dff90; } button:active { transform: scale(1.1); } body { margin: 0; } .coral { bottom: -4rem; left: -3rem; position: absolute; font-size: 12rem; white-space: nowrap; letter-spacing: 2rem; } .back { background: #009dff30; font-size: 2rem; background-image: url("//repo.bfw.wiki/bfwrepo/image/609cb5ac7b93a.png"); background-size: cover; } .back .coral { left: 2rem; bottom: -5rem; font-size: 17rem; white-space: nowrap; letter-spacing: 5rem; } .middle { background: #009dff30; font-size: 4rem; } .front { background: #009dff30; font-size: 6rem; } .layer { width: 100%; height: 100%; position: absolute; overflow: hidden; } .fish { animation: example 17s linear infinite; position: absolute; } @keyframes example { 0% { left: 0; transform: scaleX(-1); } 50% { left: 100%; transform: scaleX(-1); } 51% { transform: scaleX(1); } 100% { left: 0; } } </style> </head> <body> <div id="app"> <button v-on:click="addFish">Add Fish</button> <div class="layer back"> <div v-for="fish in back" class="fish" :style="fish.style"> {{fish.fish}} </div> <div class="coral"> 🌴🎍🌴🎍🌴🎍🌴🎍🌴 </div> </div> <div class="layer middle"> <div v-for="fish in middle" class="fish" :style="fish.sty.........完整代码请登录后点击上方下载按钮下载查看
网友评论0