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