anime实现小球波动涟漪动画效果代码
代码语言:html
所属分类:动画
代码描述:anime实现小球波动涟漪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { background-color: #F6F4F2; color: #252423; } body { display: flex; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100vh; } .animation-wrapper { width: 80%; padding-bottom: 40%; } .stagger-visualizer { position: absolute; width: 1100px; height: 550px; transform-origin: left top; } .stagger-visualizer .dots-wrapper { transform: translateZ(0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .stagger-visualizer .dot { position: relative; z-index: 1; width: 23px; height: 23px; margin: 16px; background-color: currentColor; border-radius: 50%; } @media (min-width: 740px) { .stagger-visualizer .dot { background-color: transparent; background-image: linear-gradient(180deg, #FFFFFF 8%, #D3CDC6 100%); } } .stagger-visualizer .cursor { position: absolute; top: 0px; left: 0px; width: 37px; height: 37px; margin: 9px; background-color: currentColor; border-radius: 50%; } </style> </head> <body> <div class="animation-wrapper"> <div class="stagger-visualizer"> <div class="cursor color-red"></div> <div class="dots-wrapper"></div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime.3.0.1.js"></script> <script> function fitElementToParent(el, padding) { var timeout = null; function resize() { if (timeout) clearTimeout(timeout); anime.set(el, {scale: 1}); var pad = padding || 0; var parentEl = el.parentNode; var elOffsetWidth = el.offsetWidth - pad; var parentOffsetWidth = parentEl.offsetWidth; var ratio = parentOffsetWidth / elOffsetWidth; timeout = setTimeout(anime.set(el, {scale: ratio}), 10); } resize(); window.addEventListener('resize', resize); } var advancedStaggeringAnimation = (function() { var staggerVisualizerEl = document.querySelector('.stagger-visualizer').........完整代码请登录后点击上方下载按钮下载查看
网友评论0