js实现一个纸屑按钮动画效果代码
代码语言:html
所属分类:表单美化
代码描述:js实现一个纸屑按钮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> @charset "utf-8"; @keyframes loading { 0% { cy: 10; } 25% { cy: 3; } 50% { cy: 10; } } body { -webkit-font-smoothing: antialiased; background-color: #f4f7ff; } canvas { height: 100vh; pointer-events: none; position: fixed; width: 100%; z-index: 2; } button { background: none; border: none; color: #f4f7ff; cursor: pointer; font-family: "Quicksand", sans-serif; font-size: 14px; font-weight: 500; height: 40px; left: 50%; outline: none; overflow: hidden; padding: 0 10px; position: fixed; top: 50%; transform: translate(-50%, -50%); width: 190px; -webkit-tap-highlight-color: transparent; z-index: 1; } button::before { background: #1f2335; border-radius: 50px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) inset; content: ""; display: block; height: 100%; margin: 0 auto; position: relative; transition: width 0.2s cubic-bezier(0.39, 1.86, 0.64, 1) 0.3s; width: 100%; } button.ready .submitMessage svg { opacity: 1; top: 1px; transition: top 0.4s ease 600ms, opacity 0.3s linear 600ms; } button.ready .submitMessage .button-text span { top: 0; opacity: 1; transition: all 0.2s ease calc(var(--dr) + 600ms); } button.loading::before { transition: width 0.3s ease; width: 80%; } button.loading .loadingMessage { opacity: 1; } button.loading .loadingCircle { animation-duration: 1s; animation-iteration-count: infinite; animation-name: loading; cy: 10; } button.complete .submitMessage svg { top: -30px; transition: none; } button.complete .submitMessage .button-text span { top: -8px; transition: none; } button.complete .loadingMessage { top: 80px; } button.complete .successMessage .button-text span { left: 0; opacity: 1; transition: all 0.2s ease calc(var(--d) + 1000ms); } button.complete .successMessage svg { stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease-in-out 1.4s; } .button-text span { opacity: 0; position: relative; } .message { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; } .message svg { display: inline-block; fill: none; margin-right: 5px; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .submitMessage .button-text span { top: 8px; transition: all 0.2s ease var(--d); } .submitMessage svg { color: #5c86ff; margin-left: -1px; opacity: 0; position: relative; top: 30px; transition: top 0.4s ease, opacity 0.3s linear; width: 14px; } .loadingMessage { opacity: 0; transition: opacity 0.3s linear 0.3s, top 0.4s cubic-bezier(0.22, 0, 0.41, -0.57); } .loadingMessage svg { fill: #5c86ff; margin: 0; width: 22px; } .successMessage .button-text span { left: 5px; transition: all 0.2s ease var(--dr); } .successMessage svg { color: #5cffa1; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.3s ease-in-out; width: 14px; } .loadingCircle:nth-child(2) { animation-delay: 0.1s; } .loadingCircle:nth-child(3) { animation-delay: 0.2s; } </style> </head> <body> <button id="button" class="ready" onClick="clickButton();"> <div class="message submitMessage"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 12.2"> <polyline stroke="currentColor" points="2,7.1 6.5,11.1 11,7.1 "/> <line stroke="currentColor" x1="6.5" y1="1.2" x2="6.5" y2="10.3"/> </svg> <span class="button-text">提交</span> </div> <div class="message loadingMessage"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 17"> <circle class="loadingCircle" cx="2.2" cy="10" r="1.6"/> <circle class="loadingCircle" cx="9.5" cy="10" r="1.6"/> <circle class="loadingCircle" cx="16.8" cy="10" r="1.6"/> </svg> </div> <div class="message successMessage"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 11"> <polyline stroke="currentColor" points="1.4,5.8 5.1,9.5 11.6,2.1 "/> </svg> <span class="button-text">完成</span> </div> </button> <canvas id="canvas"></canvas> <script type="text/javascript"> // ammount to add on each button press const confettiCount = 20 const sequinCount = 10 // "physics" variables const gravityConfetti = 0.3 const gravitySequins = 0.55 const dragConfetti = 0.075 const dragSequins = 0.02 const terminalVelocity = 3 // init other global elements const button = document.getElementById('button') var disabled = false const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') canvas.width = window.innerWidth canvas.height = window.innerHeight let cx = ctx.canvas.width / 2 let cy = ctx.canvas.height / 2 // add Confetto/Sequin objects to arrays to draw them let confetti = [] let sequins = [] // colors, back side is darker for confetti flipping const colors = [ { front : '#7b5cff', back: '#6245e0' }, // Purple { front : '#b3c7ff', back: '#8fa5e5' }, // Light Blue { front : '#5c86ff', back: '#345dd1' } // Darker Blue ] // helper function to pick a random number within a range randomRange = (min, max) => Math.random() * (max - min) + min // helper function to get initial velocities for confetti // this weighted spread helps the confetti look more realistic initConfettoVelocity = (xRange, yRange) => { const x = randomRange(xRange[0], xRange[1]) const range = yRange[1] - yRange[0] + 1 let y = yRange[1] - Mat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0