svg+js实现订阅按钮点击交互动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+js实现订阅按钮点击交互动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> .unsub-button { background: none; border: 0; color: #222; display: block; font-family: "Quicksand", sans-serif; font-size: 13px; font-weight: 600; height: 40px; outline: none; padding-right: 32px; position: relative; width: 160px; -webkit-tap-highlight-color: transparent; } .unsub-button.ready { cursor: pointer; } .unsub-button.clicked::before { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); height: 32px; width: 128px; } .unsub-button.clicked .unsub-button__icon { opacity: 0; transform: translate(-150%, -50%) scale(0); } .unsub-button.clicked .unsub-button__default-text { opacity: 0; transform: translate(10%, 0%) scale(0); } .unsub-button.clicked .unsub-button__confirm-text .word { opacity: 1; top: 0; } .unsub-button.clicked .unsub-button__confirm-text .char { animation-name: bounce; } .unsub-button.show-instructions .unsub-button__confirm-text { opacity: 0; } .unsub-button.show-instructions .unsub-button__instruction-text { opacity: 1; top: 110%; } .unsub-button.show-instructions .unsub-button__kid { pointer-events: auto; } .unsub-button.show-instructions .unsub-button__kid-wrapper { transform: translate(0px, 20px) rotate(0); } .unsub-button.show-instructions .target { cursor: pointer; } .unsub-button.show-instructions.happy .happy { opacity: 1; } .unsub-button.show-instructions.worried .worried { opacity: 1; } .unsub-button.show-instructions.sad::after { color: #222; opacity: 1; transition: opacity 600ms linear 400ms, color 400ms linear 1400ms; } .unsub-button.show-instructions.sad .sad { opacity: 1; } .unsub-button::before { background-color: #fff; border-radius: 5px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05); content: ""; display: block; height: 100%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: width 300ms ease-in-out, height 300ms ease-in-out, box-shadow 300ms linear; width: 100%; z-index: 1; } .unsub-button::after { align-items: center; background: #fff; color: #fff; content: "How could you..."; display: flex; height: 100vh; justify-content: center; left: 50%; min-width: 300px; opacity: 0; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: opacity 600ms linear 2000ms, color 600ms linear 1400ms; width: 33.34vw; z-index: 10; } .unsub-button__default-text { display: block; opacity: 1; position: relative; transform: none; transition: opacity 200ms linear, transform 200ms ease; z-index: 3; } .unsub-button__icon { fill: none; stroke: #222; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; opacity: 1; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); transition: opacity 200ms linear, transform 200ms ease; width: 24px; z-index: 2; } .unsub-button__icon .cancel-color { stroke: #ff6161; } .unsub-button__confirm-text { left: 50%; opacity: 1; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: opacity 200ms linear; white-space: nowrap; z-index: 3; } .unsub-button__confirm-text .word { margin-right: 5px; opacity: 0; position: relative; top: -5px; transition: opacity 400ms linear var(--word-delay), top 400ms linear var(--word-delay); } .unsub-button__confirm-text .word--bold { color: #ff6161; margin: 0; transition: opacity 400ms linear var(--word-delay); white-space: nowrap; } .unsub-button__confirm-text .word .char { --bounceHeight: -5px; animation-duration: 400ms; animation-direction: alternate; animation-delay: var(--char-delay); animation-iteration-count: 2; display: inline-block; } .unsub-button__instruction-text { color: #fff; left: 50%; opacity: 0; pointer-events: none; position: absolute; top: 100%; transform: translate(-50%, 0%); transition: top 500ms ease 700ms, opacity 300ms linear 700ms; white-space: nowrap; z-index: 3; } .unsub-button__kid { bottom: 4px; left: 50%; pointer-events: none; position: absolute; transform: translate(-50%, 0%); width: 150px; z-index: 5; } .unsub-button__kid-wrapper { transform: translate(0%, 100%) rotate(20deg); transform-origin: 50% 100%; transition: transform 600ms cubic-bezier(0.6, 1.45, 0.75, 1); } .unsub-button__kid .happy, .unsub-button__kid .worried, .unsub-button__kid .sad { opacity: 0; } .unsub-button--balloon.show-instructions .unsub-button__balloon-wrapper { transform: translate(0, 20px); } .unsub-button--balloon.show-instructions .unsub-button__balloon-wrapper-inner { animation-name: balloonRock; } .unsub-button--balloon.show-instructions.sad .balloonPopMask { opacity: 1; transform: scale(1); } .unsub-button--balloon.show-instructions.sad .balloonPopPiece { opacity: 1; } .unsub-button--balloon.show-instructions.sad .balloonPopPiece--string { transform: scaleY(0.6); transform-origin: 60% 80%; } .unsub-button--balloon.show-instructions.sad .balloonPopPiece--1 { transform: translate(35px, -25px); } .unsub-button--balloon.show-instructions.sad .balloonPopPiece--2 { transform: translate(-40px, -10px); } .unsub-button--balloon.show-instructions.sad .balloonPopPiece--3 { transform: translate(50px, 10px); } .unsub-button--balloon .unsub-button__kid .balloonPopMask { opacity: 0; transform: scale(0); transform-origin: 188px 86px; transition: transform 150ms linear; } .unsub-button--balloon .unsub-button__kid .balloonPopPiece { opacity: 0; transition: transform 1200ms ease-out, opacity 100ms linear; } .unsub-button--balloon .unsub-button__balloon-wrapper { transform: translate(0%, 100%); transform-origin: 50% 100%; transition: transform 800ms ease-in; } .unsub-button--balloon .unsub-button__balloon-wrapper-inner { animation-delay: 700ms; animation-duration: 2000ms; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timing-function: ease-out; transform: rotate(8deg); transform-origin: 60% 80%; } .unsub-button--ice-cream::after { content: "Shame on you..."; } .unsub-button--ice-cream.show-instructions .icecreamPieces { animation-name: bounce; } .unsub-button--ice-cream.show-instructions .drip { transform: none; } .unsub-button--ice-cream.show-instructions.sad .icecreamPieces { transition: transform 1200ms ease-out; } .unsub-button--ice-cream.show-instructions.sad .icecreamPieces--cherry { transform: translate(30px, 45px) rotate(180deg); } .unsub-button--ice-cream.show-instructions.sad .icecreamPieces--top { transform: translate(-10px, 55px) rotate(90deg); } .unsub-button--ice-cream.show-instructions.sad .icecreamPieces--middle { transform: translate(-80px, 15px) rotate(-120deg); } .unsub-button--ice-cream.show-instructions.sad .icecreamPieces--bottom { transform: translate(-25px, 25px) rotate(-60deg); } .unsub-button--ice-cream.show-instructions.sad .drip { display: none; } .unsub-button--ice-cream .unsub-button__kid-wrapper { transform: translate(0%, 100%) rotate(-10deg); transition: transform 400ms cubic-bezier(0.6, 1.45, 0.75, 1); } .unsub-button--ice-cream .icecreamPieces { animation-delay: 100ms; animation-direct.........完整代码请登录后点击上方下载按钮下载查看
网友评论0