svg+js实现彩色方块网格上升动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+js实现彩色方块网格上升动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { width: 100%; height: 100%; margin: 0; } #svg { width: 100%; height: 100%; animation: fade_in 0.8s linear forwards; } * { overflow: visible; } #svg svg { transform-box: border-box; transform-origin: center; } #svg rect { transform-box: fill-box; transform-origin: center; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-iteration-count: infinite; opacity: 0; } svg path { transform-box: fill-box; } @keyframes fade_in_out { 0% { opacity: 0%; transform: translateY(200%) scale(0.7); } 15%, 40% { opacity: 1; transform: translateY(0) scale(1); } 55%, 100% { opacity: 0%; transform: translateY(-200%) scale(0.7); } } @keyframes fade_in { 0%, 60% { opacity: 0; } 100% { opacity 1; } } </style> </head> <body translate="no"> <svg id="svg"></svg> <script > const svg = document.getElementById('svg') const squareSize = 16 const colors = [ '#ffd100', '#34657f', '#7ba7bc', '#ff6a13', '#a7a8aa', '#101820', ] const setup = () => { let squareSmash window.clearInterval(squareSmash) svg.innerHTML = '' const windowWidth = window.innerWidth const windowHeight = window.innerHeight const squaresInX = Math.floor((windowWidth / squareSize) + 1) const squaresInY = Math.floor((windowHeight / squareSize) + 1) svg.setAttribute('viewBox', `0 0 ${windowWidth} ${windowHeight}`) const createRandomSquare = ().........完整代码请登录后点击上方下载按钮下载查看
网友评论0