【HTML样式】加载动画专题 每周更新

__fuys__2024-09-22 14:17

加载动画专题

煎蛋加载动画

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的脚本 如果想看的可以点个关注~

相关推荐
Amd7942 分钟前
Nuxt.js 应用中的 webpack：compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You11 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生22 分钟前
如何用AI写小说(二)：Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410925 分钟前
在有网络连接的机器上打包 electron 及其依赖项，在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap37 分钟前
百度世界2024精选公开课：基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2（详细步骤）
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿