js+css实现爱心漂浮开关动画效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现爱心漂浮开关动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); body { background-color: FloralWhite; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; font-family: Montserrat, sans-serif; } .container { display: flex; } .toggle [aria-pressed] { display: block; box-sizing: border-box; border: none; color: inherit; background: none; font: inherit; line-height: inherit; text-align: left; padding: 0.5rem 0 0 4rem; position: relative; } .toggle [aria-pressed]::before, .toggle [aria-pressed]::after { content: ""; position: absolute; height: 1.5rem; transition: all 0.25s ease; } .toggle [aria-pressed]::before { left: 0; top: 0.2rem; width: 3rem; border: 0.2rem solid #80848e; background: #80848e; border-radius: 1.1rem; } .toggle [aria-pressed]::after { left: 0; top: 0.25rem; background-color: #fff; background-position: center center; border-radius: 50%; width: 1.5rem; border: 0.15rem solid #80848e; } .toggle [aria-pressed=true]::after { left: 1.6rem; border-color: #23a55a; color: #23a55a; border-radius: 1rem; } .toggle [aria-pressed=true]::before { background-color: #23a55a; border-color: #23a55a; } .toggle [aria-pressed]:active::after { border-color: rgba(35, 165, 90, 0.8); color: rgba(35, 165, 90, 0.8); width: 2rem; border-radius: 1rem; } .toggle [aria-pressed=true]:active::after { left: 1rem; } .toggle [aria-pressed]:active::before { background-color: rgba(35, 165, 90, 0.8); border-color: rgba(35, 165, 90, 0.8); } .toggle [aria-pressed] svg { position: absolute; height: 1.5rem; top: 0.4rem; z-index: 1; transition: all 0.25s ease; } .toggle [aria-pressed=false] svg { left: 0.1rem; } .toggle [aria-pressed=false]:active svg { left: 0.3rem; } .toggle [aria-pressed=true] svg { left: 1.8rem; } .toggle [aria-pressed=true]:active svg { left: 1.35rem; } .toggle [aria-pressed] svg path { fill: #80848e; transition: all 0.25s ease; } .toggle [aria-pressed]:active svg path { fill: #8ebfa2; } .toggle [aria-pressed=true] svg path { fill: #23a55a; } .toggle [aria-pressed] label { text-transform: capitalize; font-weight: 700; font-size: 0.9rem; position: relative; } .toggle [aria-pressed] label:before { position: absolute; content: ""; width: 100%; height: 3px; background-color: rgba(35, 165, 90, 0.8); z-index: -1; bottom: 0px; width: 0px; transition: 0.25s all 0.1s ease; } .toggle [aria-pressed=true] label:before { width: 100%; } #fireworksContainer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .firework { position: absolute; font-size: 25px; opacity: 0; animation: fireworksAnimation 2s linear forwards; z-index: -1; } @keyframes fireworksAnimation { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-500px) scale(0); } } </style> </head> <body> <div class="container"> <div class="toggle"> <button type="button" id="styled" aria-pressed="false"> <svg id="svg" viewBox="0 0 20 20" fill="none"> <path></path> <path></path> </svg> <label>a pretty toggle</label> </button> </div> </div> <script > //I'm sure there's a much simpler way to get the same result 🤔 dCheck = ["M7.89561 14.8538L6.30462 13.2629L14.3099 5.25755L15.9009 6.84854L7.89561 14.8538Z", "M4.08643 11.0903L5.67742 9.49929L9.4485 13.2704L7.85751 14.8614L4.08643 11.0903Z"]; dNeutral = ["M6.56666 11.0013L6.56666 8.96683L13.5667 8.96683L13.5667 11.0013L6.56666 11.0013Z", "M13.5582 8.96683L13.5582 11.0013L6.56192 11.0013L6.56192 8.96683L13.5582 8.96683Z"]; dMark = ["M5.13231 6.72963L6.7233 5.13864L14.855 13.2704L13.264 14.8614L5.13231 6.72963Z", "M13.2704 5.13864L14.8614 6.72963L6.72963 14.8614L5.13864 13.2704L13.2704 5.13864Z"]; const animationDuration = 50; const buttons = document.querySelectorAll('.toggle button'); buttons.forEach(button => { if (button.getAttribute("aria-pressed") == "false") { setSvgState(button, dMark); } else { setSvgState(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0