anime实现点击蜂窝蜜蜂飞出动画效果代码
代码语言:html
所属分类:动画
代码描述:anime实现点击蜂窝蜜蜂飞出动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:before, *:after { box-sizing: border-box; } body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: #fde68a; overflow: hidden; user-select: none; cursor: grab; } #hive { display: inline-flex; flex-direction: column; align-items: center; pointer-events: none; transform-origin: 50% 0; } #stalk { width: 8px; height: 50px; border-radius: 4px 4px 0 0; background: #714b55; pointer-events: auto; z-index: 6; } #layers { display: inline-flex; flex-direction: column; align-items: center; } #layer { margin: -4px 0; background: #f7b030; pointer-events: auto; } #layer:nth-child(odd) { background: #e09f2c; } #layer:nth-child(1) { width: 100px; height: 30px; border-radius: 28px 28px 16px 16px; z-index: 5; } #layer:nth-child(2) { width: 140px; height: 40px; border-radius: 24px 24px 16px 16px; z-index: 4; } #layer:nth-child(3) { width: 160px; height: 50px; border-radius: 24px; z-index: 3; } #layer:nth-child(4) { width: 120px; height: 40px; border-radius: 16px 16px 24px 24px; z-index: 2; } #layer:nth-child(5) { width: 60px; height: 40px; border-radius: 8px 8px 32px 32px; z-index: 1; } #ground { position: absolute; top: calc(50% + 220px); bottom: 0; width: 100%; background: #442a1c; } #branches { position: absolute; inset: 0; pointer-events: none; } #branch1 { position: absolute; right: 0; top: 0; width: 100%; height: 50%; border-radius: 200px; background: #15803d; transform: translate(30%, -55%); } #branch2 { position: absolute; right: 0; top: 0; width: 100%; height: 80%; border-radius: 200px; background: #15803d; transform: translate(60%, -55%); } .bee { position: absolute; left: -8pt; top: -8pt; width: 16pt; height: 16pt; display: inline-block; pointer-events: none; } </style> </head> <body> <div id="hive"> <div id="stalk"></div> <div id="layers"> <div id="layer"></div> <div id="layer"></div> <div id="layer"></div> <div id="layer"></div> <div id="layer"></div> </div> </div> <div id="ground"></div> <div id="branches"> <div id="branch1"></div> <div id="branch2"></div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime.3.2.1.js"></script> <script> // Generated by LiveScript 1.6.0 (function(){ var random, touched, fell, lastTouchTime, this$ = this; random = function(a, b){ return a + Math.floor(Math.random() * (b - a + 1)); }; touched = false; fell = false; lastTouchTime = 0; anime.set(hive, { translateY: -60 }); hive.onmousedown = function(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0