gsap+svg实现可配置参数的添加购物车按钮动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+svg实现可配置参数的添加购物车按钮动画效果代码
代码标签: gsap svg 配置 参数 添加 购物车 按钮 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);
@layer normalize, base, prototype, testing, motion;
@layer motion {
:root {
--text-speed: 0.26;
--base-delay: calc(var(--text-speed) * 0.25);
--tick-speed: 0.12;
--ring-speed: 0.2;
--check-speed: 0.1;
--burst-speed: 0.32;
--step-delay: 4;
}
.playground {
--base-delay: 0;
}
.playground[data-play='true'],
[data-adding="true"] {
.check {
transition-property: opacity, scale, filter;
transition-duration: calc(calc(var(--check-speed) * 1s) * var(--speed));
transition-delay: calc((var(--base-delay) * 1s) * var(--speed));
transition-timing-function: ease-in-out;
opacity: 1;
scale: 1;
filter: blur(0);
}
.tick {
scale: 1.5;
transition-property: scale;
transition-duration: calc((calc(var(--tick-speed) * 1s)) * var(--speed));
transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s) * var(--speed));
transition-timing-function: ease-out;
}
.ring {
transition-property: opacity, scale, filter;
transition-duration: calc((calc(var(--ring-speed) * 1s)) * var(--speed));
transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s) * var(--speed));
transition-timing-function: ease-in-out;
opacity: 0;
scale: 1;
filter: blur(1px);
}
:is(.wiggle, .line) {
transition-property: stroke-dashoffset;
transition-duration: calc((calc(var(--burst-speed) * 1s)) * var(--speed));
transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s) * var(--speed));
transition-timing-function: ease-out;
stroke-dashoffset: 1.5;
}
}
.add-to-cart-text {
clip-path: circle(100% at 50% 50%);
transition-property: clip-path, opacity, filter, translate;
transition-duration: calc((var(--text-speed) * 0.6s) * var(--speed)), calc((var(--text-speed) * 1s) * var(--speed));
transition-timing-function: ease-out;
}
[data-adding='true'] .add-to-cart-text {
clip-path: circle(0% at 50% 50%);
filter: blur(2px);
opacity: 0;
translate: 0 4px;
}
[data-timing='random'] :is(.playground[data-play='true'],[data-adding="true"]) .burst :is(.wiggle, .line) {
transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay)) + (var(--d))) * 1s) * var(--speed));
}
[data-timing='sequential'] :is(.playground[data-play='true'],[data-adding="true"]) .burst :is(.wiggle, .line) {
transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay)) + (var(--index) * 0.05)) * 1s) * var(--speed));
}
[data-timing='alternate'] :is(.playground[data-play='true'],[data-adding="true"]) .burst g:nth-of-type(odd) { --alt-d: 0.1; }
[data-timing='alternate'] :is(.playground[data-play='true'],[data-adding="true"]) .burst g:nth-of-type(even) { --alt-d: 0; }
[data-timing='alternate'] :is(.playground[data-play='true'],[data-adding="true"]) .burst :is(.wiggle, .line) {
transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay)) + (var(--alt-d))) * 1s) * var(--speed));
}
}
@layer testing {
[data-play='true'] .playground {
display: block;
}
.playground {
width: 100%;
color: canvas;
display: none;
fieldset {
padding: 2rem;
display: grid;
place-items: center;
position: relative;
border: 0;
}
fieldset legend {
position: absolute;
top: 4px;
left: 6px;
color: rgba(187, 188, 196, 0.7)
}
fieldset svg {
width: 100px;
}
}
.checkmark-burst {
overflow: visible !important;
.burst {
rotate: 20deg;
}
.check {
opacity: 0.2;
scale: 0.3;
filter: blur(2px);
}
:is(.ring, .wiggle, .line, .check, .burst, .tick) {
transform-box: fill-box;
transform-origin: center;
}
:is(.wiggle, .line) {
stroke-dasharray: 1.5 1.5;
stroke-dashoffset: -1.5;
translate: 0 -180%;
}
g {
transform-origin: center;
rotate: calc(var(--index) * (360 / 8) * 1deg);
}
}
[data-color='vibrant'] .checkmark-burst g {
color: var(--color, currentColor);
}
[data-style='wiggle'] .checkmark-burst .line,
[data-style='line'] .checkmark-burst .wiggle,
[data-style='alternate'] .checkmark-burst .burst g:nth-.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0