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-direction: alternate;
animation-iteration-count: 2;
}
.unsub-button--ice-cream .icecreamPieces--cherry {
--bounceHeight: -40px;
animation-duration: 250ms;
transform-origin: 37% 14%;
}
.unsub-button--ice-cream .icecreamPieces--top {
--bounceHeight: -35px;
animation-duration: 200ms;
transform-origin: 37% 24%;
}
.unsub-button--ice-cream .icecreamPieces--middle {
--bounceHeight: -25px;
animation-duration: 150ms;
transform-origin: 37% 46%;
}
.unsub-button--ice-cream .icecreamPieces--bottom {
--bounceHeight: -15px;
animation-duration: 100ms;
transform-origin: 37% 60%;
}
.unsub-button--ice-cream .drip {
transform: translateY(-12px);
transition: transform 800ms ease-out 400ms;
}
.unsub-button--ice-cream .drip--slow {
transition: transform 1200ms ease-out 800ms;
}
.unsub-button--flower::after {
content: "You monster...";
}
.unsub-button--flower.show-instructions.sad::before {
transform: translate(-50%, -50%) rotate(6deg);
transition: transform 1ms linear 250ms;
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano {
bottom: 4px;
opacity: 1;
transform: translate(-50%, 0%) rotate(6deg);
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano-wrapper {
transform: none;
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .lid {
transform: translateY(10px) rotate(-5deg);
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .crack {
opacity: 1;
transform: none;
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .debris--1 {
transform: translate(120px, -110px);
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .debris--2 {
transform: translate(-100px, -60px);
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .debris--3 {
transform: translate(40px, -180px);
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .debris-spin {
animation-name: spin;
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .dust {
opacity: 0.2;
transform: scale(1.3) translateY(-20px);
}
.unsub-button--flower .unsub-button__kid-wrapper {
transform: translate(0%, 100%) rotate(-10deg);
}
.unsub-button--flower .unsub-button__piano {
bottom: 600px;
left: 50%;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translate(-50%, 0%);
transform-origin: 50% 100%;
transition: opacity 100ms linear, bottom 250ms linear, transition 1ms linear 250ms;
width: 300px;
z-index: 6;
}
.unsub-button--flower .unsub-button__piano-wrapper {
transform: translate(0, -60px);
transition: transform 25ms linear 250ms;
}
.unsub-button--flower .unsub-button__piano .lid {
transform: translateY(-10px) rotate(4deg);
transform-origin: 50% 60%;
transition: transform 100ms linear 250ms;
}
.unsub-button--flower .unsub-button__piano .crack {
opacity: 0;
transform: scale(0);
transform-origin: 30% 46%;
transition: transform 100ms linear 250ms;
}
.unsub-button--flower .unsub-button__piano .crack--2 {
transform-origin: 80% 50%;
}
.unsub-button--flower .unsub-button__piano .debris {
transform: none;
transition: transform 800ms ease-out 300ms;
}
.unsub-button--flower .unsub-button__piano .debris--1 .debris-spin {
animation-duration: 300ms;
transform-origin: 67% 96%;
}
.unsub-button--flower .unsub-button__piano .debris--2 .debris-spin {
animation-duration: 600ms;
transform-origin: 40% 100%;
}
.unsub-button--flower .unsub-button__piano .debris--3 .debris-spin {
animation-duration: 650ms;
transform-origin: 58% 105%;
}
.unsub-button--flower .unsub-button__piano .debris-spin {
animation-duration: 300ms;
animation-delay: 250ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.unsub-button--flower .unsub-button__piano .dust {
opacity: 0;
transform: none;
transform-origin: 40% 100%;
transition: transform 800ms ease-out 250ms, opacity 1ms linear 250ms;
}
@keyframes balloonRock {
0% {
transform: rotate(8deg);
}
35% {
transform: rotate(-3deg);
}
85% {
transform: rotate(1deg);
}
100% {
transform: none;
}
}
@keyframes bounce {
from {
transform: translateY(0);
}
to {
transform: translateY(var(--bounceHeight));
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/**** Wrapper styles ****************/
html,
body {
height: 100%;
}
body {
display: flex;
min-width: 900px;
-webkit-font-smoothing: antialiased;
}
.background {
align-items: center;
background: #38a3a5;
display: flex;
flex: 1;
height: 100%;
justify-content: center;
overflow: hidden;
position: relative;
}
.background::after {
bottom: 15px;
color: #fff;
content: "2.";
font-family: "Quicksand", sans-serif;
font-size: 24px;
font-weight: 600;
left: 30px;
opacity: 0.6;
position: absolute;
}
.background:first-of-type {
background: #22577a;
}
.background:first-of-type::after {
content: "1.";
}
.background:last-of-type {
background: #57cc99;
}
.background:last-of-type::after {
content: "3.";
}
</style>
</head>
<body>
<!-- Button 1 -->
<section class="background">
<button class="unsub-button unsub-button--balloon">
<span class="unsub-button__default-text">Unsubscribe</span>
<svg class="unsub-button__icon" viewBox="0 0 83.4 64">
<path d="M6.5 15.3l30 20.4 30-20.4"/>
<path d="M45.1 51.8H6.5V15.3h60v12.1"/>
<circle class="cancel-color" cx="65.8" cy="48.1" r="12.5"/>
<path class="cancel-color" d="M57.1 39.2l17.6 17.6"/>
</svg>
<span class="unsub-button__confirm-text">Are you sure?</span>
<span class="unsub-button__instruction-text">Ruin this kid's day<br> to unsubscribe.</span>
<svg class="unsub-button__kid" viewBox="0 0 300 300">
<g class="unsub-button__kid-wrapper">
<path d="M162.3 241.3s7.1 5.4 10.1 7.4c1 .7 6.1-6.3 6.1-6.3l11.8 12.8s-13.5 8.5-14.7 9.3c-3.6 2.5-13-2.1-17.5-4.1-4.4-2-4.8-7-4.8-7l5-10 4-2.1z" fill="#e2d0bc"/>
<path d="M81.4 254.9H70.9c0-19.4 16.3-29.2 25.6-30.4h37.4c16.1 0 32.4 17.7 33.3 19.2-2 1.7-9.1 13-8.2 17.7.1.5-11.2-1.3-12-1.8-.7 1.2 1.1 41.6 1.1 41.6l-66.4-1.1-.3-45.2z" fill="#57cc99"/>
<path d="M73.7 254.9h12l4.1 46-11.5.1c-.1.1-4.2-32.4-4.6-46.1M128 228.2c0 4.5-6.7 5.7-12.2 5.7s-12.2-1.6-12.2-5.7v-20.6H128v20.6z" fill="#e2d0bc"/>
<path d="M128 221.1s-6.7 1.6-12.2 1.6-12.2-1.5-12.2-1.5v-24.8H128v24.7z" fill="#d3c2b2"/>
<path d="M152.5 178.8c4.5 1.6 10.8-4.7 11.2-11.2.4-6.6-3.7-12.2-9.7-12.5.2 7.8-.2 16.1-1.5 23.7z" fill="#f2d8bc"/>
<path d="M159.7 160.3c0 33.5-12.2 60.5-40.4 60.5-27.7 0-50-27.1-50-60.7s28.1-36.4 46.4-36.4c23.9-.1 44 3 44 36.6z" fill="#ffe8cc"/>
<path d="M119.3 220.7c-10.4 0-20-3.8-28-10.4C78 199.5 69.2 181 69.2 160.1c0-4.8.6-8.9 1.6-12.5 4.4 41.2 12.2 63.3 48.5 73.1z" opacity=".05" fill="#010101"/>
<path d="M160.2 134.5c-1.3-3.9-1.7-8.9-3.5-12-.3-.5-1.3-1.7-2.4-2.1-3-4.1-5.1-6.6-9.4-8.9-1.4-.8-12.6-12.7-14.2-13.3-1.2-.5.5 9.5-2.5 7.8-6-3.3-14.7-11.3-17.4-11.7-3.3-.5 1.7 11.3-2 11.3-6.9 0-12.8-6.8-16.1-7.4-.3 5.6-1 11.7-3.8 13.5-2.5 1.5-8.8-2.3-10.9-.2 1.7 5.1-.1 7.7-.4 11.2-1.4.8-3.3 1.3-3.3 1.3-2.1 3.4-2.1 6.7-3.5 11.2s-2.5 9.6-3.2 15.4c-.7 5.7.2 12.2 1.5 15.6 8.6 22.1 10.4-23 17.1-29.9 6.8-6.9 31.5-4 31.5-4s29.4-4.6 34.9 2.8c5.5 7.4 6.9 46.8 6.9 25.1.2-14.5 3.6-16.6.7-25.7z".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0