加载动画专题
煎蛋加载动画
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue), 10%, 90%);
--fg: hsl(var(--hue), 10%, 10%);
--trans-dur: 0.3s;
font-size: calc(14px + (30 - 14) * (100vw - 280px) / (3840 - 280));
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
font: 1em/1.5 sans-serif;
height: 100vh;
transition: background-color var(--trans-dur), color var(--trans-dur);
}
.pl {
margin: auto;
width: 12em;
height: 12em;
}
.pl__drop, .pl__drop-inner, .pl__pan, .pl__ring, .pl__shadow {
animation: pan 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.pl__drop {
transform-origin: 13px 60px;
}
.pl__drop-inner {
animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84);
}
.pl__drop--1 {
animation-name: drop-1;
}
.pl__drop--1 .pl__drop-inner {
animation-name: drop- 1-inner;
}
.pl__drop--2 {
animation-name: drop-2;
}
.pl__drop--2 .pl__drop-inner {
animation-name: drop- 2-inner;
}
.pl__drop--3 {
animation-name: drop-3;
transform-origin: 67px 72px;
}
.pl__drop--3 .pl__drop-inner {
animation-name: drop- 3-inner;
}
.pl__drop--4 {
animation-name: drop-4;
transform-origin: 67px 72px;
}
.pl__drop--4 .pl__drop-inner {
animation-name: drop- 4-inner;
}
.pl__drop--5 {
animation-name: drop-5;
transform-origin: 67px 72px;
}
.pl__drop--5 .pl__drop-inner {
animation-name: drop- 5-inner;
}
.pl__pan {
transform-origin: 36px 74px;
}
.pl__ring {
animation-name: flip-ring;
}
.pl__shadow {
animation-name: pan-shadow;
transform-origin: 36px 124.5px;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue), 10%, 10%);
--fg: hsl(var(--hue), 10%, 90%);
}
}
/* Animation */
@keyframes drop-1 {
from {
animation-timing-function: steps(1, end);
transform: translate(0, 0);
visibility: hidden;
}
30% {
animation-timing-function: linear;
transform: translate(0, 0);
visibility: visible;
}
50%, to {
transform: translate(-6px, 0);
}
}
@keyframes drop-1-inner {
from, 30% {
fill: #abafba;
transform: translate(0, 0);
}
50%, to {
fill: rgba(171, 175, 186, 0);
transform: translate(0, -27px);
}
}
@keyframes drop-2 {
from {
animation-timing-function: steps(1, end);
transform: translate(0, 0);
visibility: hidden;
}
30% {
animation-timing-function: linear;
transform: translate(0, 0);
visibility: visible;
}
50%, to {
transform: translate(-8px, 0);
}
}
@keyframes drop-2-inner {
from, 30% {
fill: #abafba;
transform: translate(0, 0);
}
50%, to {
fill: rgba(171, 175, 186, 0);
transform: translate(0, -9px);
}
}
@keyframes drop-3 {
from {
animation-timing-function: steps(1, end);
transform: translate(0, 0);
visibility: hidden;
}
78% {
animation-timing-function: linear;
transform: translate(0, 0);
visibility: visible;
}
98%, to {
transform: translate(-24px, 0);
}
}
@keyframes drop-3-inner {
from, 78% {
fill: #abafba;
transform: translate(0, 0);
}
98%, to {
fill: rgba(171, 175, 186, 0);
transform: translate(0, -28px);
}
}
@keyframes drop-4 {
from {
animation-timing-function: steps(1, end);
transform: translate(0, 0);
visibility: hidden;
}
78% {
animation-timing-function: linear;
transform: translate(0, 0);
visibility: visible;
}
98%, to {
transform: translate(-8px, 0);
}
}
@keyframes drop-4-inner {
from, 78% {
fill: #abafba;
transform: translate(0, 0);
}
98%, to {
fill: rgba(171, 175, 186, 0);
transform: translate(0, -36px);
}
}
@keyframes drop-5 {
from {
animation-timing-function: steps(1, end);
transform: translate(0, 0);
visibility: hidden;
}
78% {
animation-timing-function: linear;
transform: translate(0, 0);
visibility: visible;
}
98%, to {
transform: translate(8px, 0);
}
}
@keyframes drop-5-inner {
from, 78% {
fill: #abafba;
transform: translate(0, 0);
}
98%, to {
fill: rgba(171, 175, 186, 0);
transform: translate(0, -32px);
}
}
@keyframes flip-ring {
from, 27% {
animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84);
stroke-dashoffset: 20;
stroke-width: 4px;
}
53.5% {
animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16);
stroke-dashoffset: -100;
stroke-width: 10px;
}
80%, to {
stroke-dashoffset: -220;
stroke-width: 4px;
}
}
@keyframes pan {
from, 88%, to {
transform: translate(0, 0) rotate(0);
}
20% {
animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16);
transform: translate(-5px, 0) rotate(-30deg);
}
30% {
animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84);
transform: translate(0, 0) rotate(20deg);
}
60%, 78% {
animation-timing-function: linear;
transform: translate(0, 0) rotate(0);
}
81.33% {
animation-timing-function: linear;
transform: translate(0, 4px) rotate(0);
}
84.67% {
animation-timing-function: linear;
transform: translate(0, -2px) rotate(0);
}
}
@keyframes pan-shadow {
from, 88%, to {
fill: rgba(115, 122, 140, 0.2);
transform: scaleX(1);
}
20% {
animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16);
fill: rgba(115, 122, 140, 0.2);
transform: scaleX(0.77);
}
30% {
animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84);
fill: rgba(115, 122, 140, 0.2);
transform: scaleX(1);
}
60%, 78% {
animation-timing-function: linear;
fill: rgba(115, 122, 140, 0.2);
transform: scaleX(1);
}
81.33% {
animation-timing-function: linear;
fill: rgba(115, 122, 140, 0.25);
transform: scaleX(0.87);
}
84.67% {
animation-timing-function: linear;
fill: rgba(115, 122, 140, 0.225);
transform: scaleX(1.065);
}
}
</style>
</head>
<body>
<svg class="pl" viewBox="0 0 128 128" width="128px" height="128px" role="img" aria-label="A pan being used to flip a blob resembling bacon as it splashes drops of grease in and out">
<clipPath id="pan-clip">
<rect rx="12" ry="14" x="4" y="52" width="68" height="28" />
</clipPath>
<defs>
<linearGradient id="pl-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#000" />
<stop offset="100%" stop-color="#fff" />
</linearGradient>
<mask id="pl-mask">
<rect x="0" y="0" width="88" height="80" fill="url(#pl-grad)" />
</mask>
</defs>
<g fill="currentColor">
<g fill="none" stroke-dasharray="20 221" stroke-dashoffset="20" stroke-linecap="round" stroke-width="4">
<g stroke="hsl(38,90%,50%)">
<circle class="pl__ring" cx="44" cy="40" r="35" transform="rotate(90,44,40)" />
</g>
<g stroke="hsl(8,90%,40%)" mask="url(#pl-mask)">
<circle class="pl__ring" cx="44" cy="40" r="35" transform="rotate(90,44,40)" />
</g>
</g>
<g fill="hsla(223,10%,70%,0)">
<g class="pl__drop pl__drop--1">
<circle class="pl__drop-inner" cx="13" cy="60" r="2" />
</g>
<g class="pl__drop pl__drop--2">
<circle class="pl__drop-inner" cx="13" cy="60" r="2" />
</g>
<g class="pl__drop pl__drop--3">
<circle class="pl__drop-inner" cx="67" cy="72" r="2" />
</g>
<g class="pl__drop pl__drop--4">
<circle class="pl__drop-inner" cx="67" cy="72" r="2" />
</g>
<g class="pl__drop pl__drop--5">
<circle class="pl__drop-inner" cx="67" cy="72" r="2" />
</g>
</g>
<g class="pl__pan">
<rect rx="2" ry="2" x="4" y="66" width="68" height="14" clip-path="url(#pan-clip)" id="pan" />
<rect rx="2" ry="2" x="76" y="66" width="48" height="7" />
</g>
<rect class="pl__shadow" fill="hsla(223,10%,50%,0.2)" rx="3.5" ry="3.5" x="10" y="121" width="60" height="7" />
</g>
</svg>
</body>
<script>
</script>
</html>
方块移动加载动画
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
background-color: var(--bg);
color: var(--fg);
font: 1em/1.5 sans-serif;
height: 100vh;
display: grid;
place-items: center;
transition: background-color 0.3s;
}
main {
padding: 1.5em 0;
}
.ap {
width: 8em;
height: 16em;
}
.ap__ring {
stroke: hsla(var(--hue),10%,10%,0.15);
transition: stroke 0.3s;
}
.ap__worm1,
.ap__worm2 {
animation-duration: 3s;
animation-iteration-count: infinite;
}
.ap__worm1 {
animation-name: worm1;
}
.ap__worm2 {
animation-name: worm2;
visibility: hidden;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,10%);
--fg: hsl(var(--hue),10%,90%);
}
.ap__ring {
stroke: hsla(var(--hue),10%,90%,0.1);
}
}
/* Animtions */
@keyframes worm1 {
from {
animation-timing-function: ease-in-out;
stroke-dashoffset: -87.96;
}
20% {
animation-timing-function: ease-in;
stroke-dashoffset: 0;
}
60% {
stroke-dashoffset: -791.68;
visibility: visible;
}
60.1%,
to {
stroke-dashoffset: -791.68;
visibility: hidden;
}
}
@keyframes worm2 {
from,
60% {
stroke-dashoffset: -87.96;
visibility: hidden;
}
60.1% {
animation-timing-function: cubic-bezier(0,0,0.5,0.75);
stroke-dashoffset: -87.96;
visibility: visible;
}
77% {
animation-timing-function: cubic-bezier(0.5,0.25,0.5,0.88);
stroke-dashoffset: -340;
visibility: visible;
}
to {
stroke-dashoffset: -669.92;
visibility: visible;
}
}
</style>
</head>
<body>
<main>
<svg class="ap" viewBox="0 0 128 256" width="128px" height="256px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="ap-grad1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="hsl(223,90%,55%)" />
<stop offset="100%" stop-color="hsl(253,90%,55%)" />
</linearGradient>
<linearGradient id="ap-grad2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="hsl(193,90%,55%)" />
<stop offset="50%" stop-color="hsl(223,90%,55%)" />
<stop offset="100%" stop-color="hsl(253,90%,55%)" />
</linearGradient>
</defs>
<circle class="ap__ring" r="56" cx="64" cy="192" fill="none" stroke="#ddd" stroke-width="16" stroke-linecap="round" />
<circle class="ap__worm1" r="56" cx="64" cy="192" fill="none" stroke="url(#ap-grad1)" stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 263.89" />
<path class="ap__worm2" d="M120,192A56,56,0,0,1,8,192C8,161.07,16,8,64,8S120,161.07,120,192Z" fill="none" stroke="url(#ap-grad2)" stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 494" />
</svg>
</main>
</body>
<script>
</script>
</html>
电子风变脸
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background:#000 ;
overflow:hidden;
user-select:none;
}
.emoji-box {
position:absolute;
width:100px;
height:100px;
top:50%;
left:50%;
border:solid white 0px;
filter:
/*
url(#noise)
url(#liquid)
url(#anaglyph3d)
*/
url(#pixelate-effect);
;
cursor:pointer;
transition: all 1s;
transform-origin:center;
transform:translate(-50%,-50%) scale(1.6);
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
&:hover {
transform: translate(-50%,-50%) scale(2);
}
}
#svg-emojis {
filter:
/*
url(#noise)
url(#pixelate-effect);
*/
url(#liquid)
url(#anaglyph3d)
;
animation:r infinite 4s;
transform-origin:center;
animation-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
@keyframes r {
0% {
transform: rotate(25deg);
}
50% {
transform: rotate(-25deg);
}
100% {
transform: rotate(25deg);
}
}
#svg-emojis path{
opacity:0;
transition: opacity 1s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
/*
#emo-laugh{
display:block;
}
#emo-angry{
display:block;
}
#emo-bomb{
display:block;
}
*/
</style>
</head>
<body>
<div class="emoji-box">
<svg id="svg-emojis" viewBox="-70 -70 600 600" width="100" title="laugh" id="emoji-laugh" oveflow="visible">
<path id="emo-laugh" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 152c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm88 272h-16c-73.4 0-134-55-142.9-126-1.2-9.5 6.3-18 15.9-18h270c9.6 0 17.1 8.4 15.9 18-8.9 71-69.5 126-142.9 126z" />
<path id="emo-bomb" d="M440.5 88.5l-52 52L415 167c9.4 9.4 9.4 24.6 0 33.9l-17.4 17.4c11.8 26.1 18.4 55.1 18.4 85.6 0 114.9-93.1 208-208 208S0 418.9 0 304 93.1 96 208 96c30.5 0 59.5 6.6 85.6 18.4L311 97c9.4-9.4 24.6-9.4 33.9 0l26.5 26.5 52-52 17.1 17zM500 60h-24c-6.6 0-12 5.4-12 12s5.4 12 12 12h24c6.6 0 12-5.4 12-12s-5.4-12-12-12zM440 0c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12s12-5.4 12-12V12c0-6.6-5.4-12-12-12zm33.9 55l17-17c4.7-4.7 4.7-12.3 0-17-4.7-4.7-12.3-4.7-17 0l-17 17c-4.7 4.7-4.7 12.3 0 17 4.8 4.7 12.4 4.7 17 0zm-67.8 0c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17zm67.8 34c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17zM112 272c0-35.3 28.7-64 64-64 8.8 0 16-7.2 16-16s-7.2-16-16-16c-52.9 0-96 43.1-96 96 0 8.8 7.2 16 16 16s16-7.2 16-16z" />
<path id="emo-angry" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM136 240c0-9.3 4.1-17.5 10.5-23.4l-31-9.3c-8.5-2.5-13.3-11.5-10.7-19.9 2.5-8.5 11.4-13.2 19.9-10.7l80 24c8.5 2.5 13.3 11.5 10.7 19.9-2.1 6.9-8.4 11.4-15.3 11.4-.5 0-1.1-.2-1.7-.2.7 2.7 1.7 5.3 1.7 8.2 0 17.7-14.3 32-32 32S136 257.7 136 240zm168 154.2c-27.8-33.4-84.2-33.4-112.1 0-13.5 16.3-38.2-4.2-24.6-20.5 20-24 49.4-37.8 80.6-37.8s60.6 13.8 80.6 37.8c13.8 16.5-11.1 36.6-24.5 20.5zm76.6-186.9l-31 9.3c6.3 5.8 10.5 14.1 10.5 23.4 0 17.7-14.3 32-32 32s-32-14.3-32-32c0-2.9.9-5.6 1.7-8.2-.6.1-1.1.2-1.7.2-6.9 0-13.2-4.5-15.3-11.4-2.5-8.5 2.3-17.4 10.7-19.9l80-24c8.4-2.5 17.4 2.3 19.9 10.7 2.5 8.5-2.3 17.4-10.8 19.9z" />
<path id="emo-dice" d="M106.75 215.06L1.2 370.95c-3.08 5 .1 11.5 5.93 12.14l208.26 22.07-108.64-190.1zM7.41 315.43L82.7 193.08 6.06 147.1c-2.67-1.6-6.06.32-6.06 3.43v162.81c0 4.03 5.29 5.53 7.41 2.09zM18.25 423.6l194.4 87.66c5.3 2.45 11.35-1.43 11.35-7.26v-65.67l-203.55-22.3c-4.45-.5-6.23 5.59-2.2 7.57zm81.22-257.78L179.4 22.88c4.34-7.06-3.59-15.25-10.78-11.14L17.81 110.35c-2.47 1.62-2.39 5.26.13 6.78l81.53 48.69zM240 176h109.21L253.63 7.62C250.5 2.54 245.25 0 240 0s-10.5 2.54-13.63 7.62L130.79 176H240zm233.94-28.9l-76.64 45.99 75.29 122.35c2.11 3.44 7.41 1.94 7.41-2.1V150.53c0-3.11-3.39-5.03-6.06-3.43zm-93.41 18.72l81.53-48.7c2.53-1.52 2.6-5.16.13-6.78l-150.81-98.6c-7.19-4.11-15.12 4.08-10.78 11.14l79.93 142.94zm79.02 250.21L256 438.32v65.67c0 5.84 6.05 9.71 11.35 7.26l194.4-87.66c4.03-1.97 2.25-8.06-2.2-7.56zm-86.3-200.97l-108.63 190.1 208.26-22.07c5.83-.65 9.01-7.14 5.93-12.14L373.25 215.06zM240 208H139.57L240 383.75 340.43 208H240z" />
<path id="emo-flushed" d="M344 200c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm-192 0c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM80 224c0-39.8 32.2-72 72-72s72 32.2 72 72-32.2 72-72 72-72-32.2-72-72zm232 176H184c-21.2 0-21.2-32 0-32h128c21.2 0 21.2 32 0 32zm32-104c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z" />
<path id="emo-vr-cardboard" style="transform:scale(.7);" d="M608 64H32C14.33 64 0 78.33 0 96v320c0 17.67 14.33 32 32 32h160.22c25.19 0 48.03-14.77 58.36-37.74l27.74-61.64C286.21 331.08 302.35 320 320 320s33.79 11.08 41.68 28.62l27.74 61.64C399.75 433.23 422.6 448 447.78 448H608c17.67 0 32-14.33 32-32V96c0-17.67-14.33-32-32-32zM160 304c-35.35 0-64-28.65-64-64s28.65-64 64-64 64 28.65 64 64-28.65 64-64 64zm320 0c-35.35 0-64-28.65-64-64s28.65-64 64-64 64 28.65 64 64-28.65 64-64 64z" />
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
id="svg2"
xml:space="preserve"
width="0"
height="0"
oveflow="visible"
viewBox="0 0 500 500">
<filter id="liquid">
<feGaussianBlur stdDeviation="1"
id="feGaussianBlur1"
result="gaussian_blur_result1" />
<feComposite
operator="in"
in="gaussian_blur_result1"
in2="result8"
id="feComposite2"
result="composite_result1" />
<feGaussianBlur
in="composite_result1"
stdDeviation="1"
id="feGaussianBlur2"
result="gaussian_blur_result2" />
<feSpecularLighting
specularExponent="20"
specularConstant="7"
surfaceScale="5"
lighting-color="#ffffff"
result="result1"
in="gaussian_blur_result2"
id="feSpecularLighting2">
<feDistantLight
id="feDistantLight5"
azimuth="45"
elevation="100" />
</feSpecularLighting>
<feComposite
operator="in"
in="result1"
in2="composite_result1"
id="feComposite3"
result="result2" />
<feComposite
k1="0" k2="1" k4="0" k3="1"
operator="arithmetic"
result="result4"
in="composite_result1"
in2="result2"
id="feComposite4" />
<feComposite
operator="in"
in="result9"
in2="result4"
result="result9"
id="feComposite5" />
<feBlend
mode="multiply"
in="result9"
in2="result9"
id="feBlend5" />
<feFlood
flood-color="cyan"
flood-opacity=".8"
result="flood2" />
<feComposite
in="flood2"
in2="SourceAlpha"
operator="in"
result="mask2" />
<feGaussianBlur
in="mask2"
stdDeviation="3"
result="blur2" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="result9" />
</feMerge>
</filter>
<filter id="anaglyph3d">
<feOffset in="SourceGraphic" dx="-4" dy="0" result="left"/>
<feOffset in="SourceGraphic" dx="4" dy="0" result="right"/>
<feComponentTransfer in="left" result="leftRed">
<feFuncR type="identity"></feFuncR>
<feFuncG type="discrete" tableValues="0"></feFuncG>
<!-- <feFuncB type="discrete" tableValues="0"></feFuncB> -->
</feComponentTransfer>
<feComponentTransfer in="right" result="rightCyan">
<feFuncR type="discrete" tableValues="0"></feFuncR>
<feFuncG type="identity"></feFuncG>
<feFuncB type="identity"></feFuncB>
</feComponentTransfer>
<feBlend in="leftRed" in2="rightCyan" mode="screen"/>
</filter>
<filter id="pixelate-effect" x="0" y="0">
<feFlood x="0" y="0" height="2" width="2"/>
<feComposite width="2" height="4"/>
<feTile x="0" y="0" width="1000" height="1000" result="c"/>
<feComposite in="SourceGraphic" in2="c" operator="in"/>
<feMorphology operator="dilate" radius=".5"/>
</filter>
<filter id="noise">
<feTurbulence
type="fractalNoise"
baseFrequency="0.002"
numOctaves="1" seed="1"
result="noise">
<animate
attributeName="baseFrequency"
values="0.002;0.01;0.002"
dur="8s"
repeatCount="indefinite"
/>
</feTurbulence>
<feDisplacementMap
in="SourceGraphic"
in2="noise"
scale="20">
<animate
attributeName="scale"
values="20; 12; 20"
dur="2s"
repeatCount="indefinite" />
</feDisplacementMap>
</svg>
</body>
<script>
document.addEventListener("DOMContentLoaded", function() {
const paths = document.querySelectorAll("#svg-emojis path");
let currentIndex = 0;
function showNextPath() {
paths.forEach(path => path.style.display = "none");
paths[currentIndex].style.display = "block";
paths.forEach(path => path.style.opacity = 0);
paths[currentIndex].style.opacity = 1;
currentIndex = (currentIndex + 1) % paths.length;
}
paths.forEach(path => path.style.display = "none");
paths[0].style.display = "block";
paths.forEach(path => path.style.opacity = 0);
paths[0].style.opacity = 1;
setInterval(showNextPath, 2000);
});
</script>
</html>
正方体组合
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* reset & base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
min-height: 100vh;
background-color: #1f2029;
perspective: 500;
overflow: hidden;
}
.cube {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
width: 10rem;
height: 10rem;
margin: auto;
will-change: transform;
transform-style: preserve-3d;
animation: 20s cube-rotate linear infinite;
}
.cube .cube__face {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.cube .cube__face.cube__face--front-side {
background-color: #b4b6c6;
transform: translateZ(5rem);
animation: 5s unfold-front linear infinite;
}
.cube .cube__face.cube__face--back-side {
background-color: #9799b0;
transform: translateZ(-5rem);
animation: 5s unfold-back linear infinite;
}
.cube .cube__face.cube__face--left-side {
background-color: #7a7d9a;
transform: translateX(-5rem) rotateY(90deg);
animation: 5s unfold-left linear infinite;
}
.cube .cube__face.cube__face--right-side {
background-color: #616480;
transform: translateX(5rem) rotateY(90deg);
animation: 5s unfold-right linear infinite;
}
.cube .cube__face.cube__face--top-side {
background-color: #4b4d63;
transform: translateY(-5rem) rotateX(90deg);
animation: 5s unfold-top linear infinite;
}
.cube .cube__face.cube__face--bottom-side {
background-color: #353746;
transform: translateY(5rem) rotateX(90deg);
animation: 5s unfold-bottom linear infinite;
}
@keyframes unfold-top {
0%, 100% {
transform: translateY(-5rem) rotateX(90deg);
}
50% {
transform: translateY(-15rem) rotateX(90deg);
}
}
@keyframes unfold-bottom {
0%, 100% {
transform: translateY(5rem) rotateX(90deg);
}
50% {
transform: translateY(15rem) rotateX(90deg);
}
}
@keyframes unfold-front {
0%, 100% {
transform: translateZ(5rem);
}
50% {
transform: translateZ(15rem);
}
}
@keyframes unfold-back {
0%, 100% {
transform: translateZ(-5rem);
}
50% {
transform: translateZ(-15rem);
}
}
@keyframes unfold-right {
0%, 100% {
transform: translateX(5rem) rotateY(90deg);
}
50% {
transform: translateX(15rem) rotateY(90deg);
}
}
@keyframes unfold-left {
0%, 100% {
transform: translateX(-5rem) rotateY(90deg);
}
50% {
transform: translateX(-15rem) rotateY(90deg);
}
}
@keyframes cube-rotate {
100% {
transform: rotateY(360deg) rotateX(720deg) rotateZ(1080deg);
}
}
</style>
</head>
<body>
<div class="cube">
<div class="cube__face cube__face--front-side"></div>
<div class="cube__face cube__face--back-side"></div>
<div class="cube__face cube__face--left-side"></div>
<div class="cube__face cube__face--right-side"></div>
<div class="cube__face cube__face--top-side"></div>
<div class="cube__face cube__face--bottom-side"></div>
</div>
</body>
<script>
</script>
</html>
跳跃式加载动画
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
background-color: var(--bg);
color: var(--fg);
font: 1em/1.5 sans-serif;
height: 100vh;
display: grid;
place-items: center;
transition: background-color 0.3s;
}
main {
padding: 1.5em 0;
}
.ap {
width: 8em;
height: 16em;
}
.ap__ring {
stroke: hsla(var(--hue),10%,10%,0.15);
transition: stroke 0.3s;
}
.ap__worm1,
.ap__worm2 {
animation-duration: 3s;
animation-iteration-count: infinite;
}
.ap__worm1 {
animation-name: worm1;
}
.ap__worm2 {
animation-name: worm2;
visibility: hidden;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,10%);
--fg: hsl(var(--hue),10%,90%);
}
.ap__ring {
stroke: hsla(var(--hue),10%,90%,0.1);
}
}
/* Animtions */
@keyframes worm1 {
from {
animation-timing-function: ease-in-out;
stroke-dashoffset: -87.96;
}
20% {
animation-timing-function: ease-in;
stroke-dashoffset: 0;
}
60% {
stroke-dashoffset: -791.68;
visibility: visible;
}
60.1%,
to {
stroke-dashoffset: -791.68;
visibility: hidden;
}
}
@keyframes worm2 {
from,
60% {
stroke-dashoffset: -87.96;
visibility: hidden;
}
60.1% {
animation-timing-function: cubic-bezier(0,0,0.5,0.75);
stroke-dashoffset: -87.96;
visibility: visible;
}
77% {
animation-timing-function: cubic-bezier(0.5,0.25,0.5,0.88);
stroke-dashoffset: -340;
visibility: visible;
}
to {
stroke-dashoffset: -669.92;
visibility: visible;
}
}
</style>
</head>
<body>
<main>
<svg class="ap" viewBox="0 0 128 256" width="128px" height="256px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="ap-grad1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="hsl(223,90%,55%)" />
<stop offset="100%" stop-color="hsl(253,90%,55%)" />
</linearGradient>
<linearGradient id="ap-grad2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="hsl(193,90%,55%)" />
<stop offset="50%" stop-color="hsl(223,90%,55%)" />
<stop offset="100%" stop-color="hsl(253,90%,55%)" />
</linearGradient>
</defs>
<circle class="ap__ring" r="56" cx="64" cy="192" fill="none" stroke="#ddd" stroke-width="16" stroke-linecap="round" />
<circle class="ap__worm1" r="56" cx="64" cy="192" fill="none" stroke="url(#ap-grad1)" stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 263.89" />
<path class="ap__worm2" d="M120,192A56,56,0,0,1,8,192C8,161.07,16,8,64,8S120,161.07,120,192Z" fill="none" stroke="url(#ap-grad2)" stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 494" />
</svg>
</main>
</body>
<script>
</script>
</html>
下一篇文章应该是Linux安装Java和Maven的脚本 如果想看的可以点个关注~