【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>

方块移动加载动画

在这里插入图片描述

<!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>

电子风变脸

在这里插入图片描述

<!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><svgxmlns="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>

正方体组合

在这里插入图片描述

<!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>

跳跃式加载动画

在这里插入图片描述

<!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>