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

news2024/11/16 8:56:30

加载动画专题

  • 煎蛋加载动画
  • 方块移动加载动画
  • 电子风变脸
  • 正方体组合
  • 跳跃式加载动画

煎蛋加载动画

在这里插入图片描述

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

正方体组合

在这里插入图片描述

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

下一篇文章应该是Linux安装Java和Maven的脚本 如果想看的可以点个关注~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2154398.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机毕业设计之：基于微信小程序的校园流浪猫收养系统（源码+文档+讲解）

计算机毕业设计之：基于微信小程序的校园流浪猫收养系统（源码+文档+讲解）

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…
阅读更多...
6种解决msvcp140_ATOMIC_WAIT.dll丢失的方法分享

6种解决msvcp140_ATOMIC_WAIT.dll丢失的方法分享

日常生活工作中&#xff0c;电脑已经成为我们生活和工作中不可或缺的工具。然而&#xff0c;在使用过程中&#xff0c;我们也会遇到各种问题&#xff0c;其中之一就是电脑中的msvcp140_ATOMIC_WAIT.dll文件丢失。这个问题可能会导致电脑运行不稳定&#xff0c;甚至无法正常启动…
阅读更多...
数据结构之线性表——LeetCode:328. 奇偶链表，86. 分隔链表，24. 两两交换链表中的节点

数据结构之线性表——LeetCode:328. 奇偶链表，86. 分隔链表，24. 两两交换链表中的节点

328. 奇偶链表 题目描述 328. 奇偶链表 给定单链表的头节点 head &#xff0c;将所有索引为奇数的节点和索引为偶数的节点分别组合在一起&#xff0c;然后返回重新排序的列表。 第一个节点的索引被认为是 奇数 &#xff0c; 第二个节点的索引为 偶数 &#xff0c;以此类推。…
阅读更多...
华为全联接大会HC2024 观会感

华为全联接大会HC2024 观会感

9/19-21于上海&#xff0c;华为举办了他一年一届也是最重要的华为系展会-Huawei Connect 华为全联接大会&#xff0c;今天有幸赶在展会最后一天来参观一下 上午照常是keynote&#xff0c;由华为计算线总裁进行了今天的KN开场&#xff0c;介绍了华为在“算”方面的进展&#x…
阅读更多...
Java | Leetcode Java题解之第420题强密码检验器

Java | Leetcode Java题解之第420题强密码检验器

题目&#xff1a; 题解&#xff1a; class Solution {public int strongPasswordChecker(String password) {int n password.length();int hasLower 0, hasUpper 0, hasDigit 0;for (int i 0; i < n; i) {char ch password.charAt(i);if (Character.isLowerCase(ch))…
阅读更多...
企业内训｜LLM大模型实战技术深度研修-某智算厂商研发中心

企业内训｜LLM大模型实战技术深度研修-某智算厂商研发中心

课程概要 本课程深入研修LLM大模型在实际应用中的技术实现和优化策略。通过迁移与适配、训练与调优、推理优化以及综合应用与案例分析四个模块&#xff0c;系统地探讨大模型的核心理论、关键技术和实践操作。课程内容涵盖模型迁移的理论与实操、预训练与微调策略、推理性能优化…
阅读更多...
[数据结构与算法·C++版] 笔记 1.2 什么是数据结构

[数据结构与算法·C++版] 笔记 1.2 什么是数据结构

1.2 什么是数据结构 结构&#xff1a;实体 关系数据结构&#xff1a; 按照逻辑关系组织起来的一批数据&#xff0c;按一定的存储方法把它存储在计算机中在这些数据上定义了一个运算的集合 数据结构的逻辑组织 线性结构 线性表&#xff08;表&#xff0c;栈&#xff0c;队列&…
阅读更多...
新版torch_geometric不存在uniform、maybe_num_nodes函数问题（Prune4ED论文报错解决）

新版torch_geometric不存在uniform、maybe_num_nodes函数问题（Prune4ED论文报错解决）

这是在复现论文“Towards accurate subgraph similarity computation via neural graph pruning”时遇到的报错。 ImportError: cannot import name uniform from torch_geometric.nn.pool.topk_pool 一、报错原因 论文作者使用的是2.1.0版本的torch_geometric。而我安装了2.…
阅读更多...
Google 扩展 Chrome 安全和隐私功能

Google 扩展 Chrome 安全和隐私功能

过去一周&#xff0c;谷歌一直在推出新特性和功能&#xff0c;旨在让用户在 Chrome 上的桌面体验更加安全&#xff0c;最新的举措是扩展在多个设备上保存密钥的功能。 到目前为止&#xff0c;Chrome 网络用户只能将密钥保存到 Android 上的 Google 密码管理器&#xff0c;然后…
阅读更多...
springboot实战学习（6）(用户模块的登录认证)(初识令牌)(JWT)

springboot实战学习（6）(用户模块的登录认证)(初识令牌)(JWT)

接着上篇博客学习。上篇博客是在基本完成用户模块的注册接口的开发以及注册时的参数合法性校验的基础上&#xff0c;基本完成用户模块的登录接口的主逻辑。具体往回看了解的链接如下。 springboot实战学习笔记&#xff08;5&#xff09;(用户登录接口的主逻辑)-CSDN博客文章浏览…
阅读更多...
爬虫学习 | 03 爬虫静态网页的爬取（1）

爬虫学习 | 03 爬虫静态网页的爬取（1）

学习的资料是&#xff1a;python chatgpt 网络爬虫从入门到精通 目录 Step1&#xff1a;基本的环境 Step2&#xff1a;ai辅助解决问题实现代码功能&#xff1a; Step3&#xff1a;网页的初步分析&#xff1a; Step4&#xff1a;静态网页的爬取 爬取信息&#xff1a; 实操…
阅读更多...
MQ入门（4）

MQ入门（4）

Erlang&#xff1a;面向高并发的 单机的吞吐量就是并发性&#xff1a;Rabbitmq是10w左右&#xff08;现实项目中已经足够用了&#xff09;&#xff0c;RocketMQ是10w到20w&#xff0c;Kafka是100w左右。 公司里的并发&#xff08;QPS&#xff09; 大部分的公司每天的QPS大概…
阅读更多...
【CSS in Depth 2 精译_036】5.6 Grid 网格布局中与对齐相关的属性 + 5.7本章小结

【CSS in Depth 2 精译_036】5.6 Grid 网格布局中与对齐相关的属性 + 5.7本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…
阅读更多...
react：组件通信

react：组件通信

组件通信 父组件向子组件通信 function App() {return (<div><div>这是父组件</div><Child name"这是子组件" /></div>); }// 子组件 function Child(props) {return <div>{props.name}</div>; }props说明 props可以传…
阅读更多...
AWS 管理控制台

AWS 管理控制台

目录 控制台主页 AWS 账户信息 AWS 区域 AWS 服务选择器 AWS 搜索 AWS CloudShell AWS 控制面板小部件 控制台主页 注册新的 AWS 账户并登录后&#xff0c;您将看到控制台控制面板。这是与各种 AWS 服务以及其他重要控制台组件进行交互的起点。控制面板由页面顶部的导航…
阅读更多...
初始Vitis——ZYNQ学习笔记1

初始Vitis——ZYNQ学习笔记1

一、Vitis是什么 Vitis 统一软件平台的前身为 Xilinx SDK&#xff0c;从 Vivado 2019.2 版本开始&#xff0c; Xilinx SDK 开发环境已统一整合到全功能一体化的 Vitis 中。 Vitis 开发平台除了启动方式、软件界面、使用方法与 SDK 开发平台略有区别&#xff0c;其他操作几乎一模…
阅读更多...
Windows本地连接远程服务器并创建新用户详细记录

Windows本地连接远程服务器并创建新用户详细记录

前提可知&#xff1a; &#xff08;1&#xff09;服务器IP地址&#xff1a;x.x.x.x &#xff08;2&#xff09;服务器名称&#xff1a;root&#xff08;一般默认为root&#xff0c;当然也有别的名称&#xff09; &#xff08;3&#xff09;服务器登陆密码&#xff1a;**** 一、…
阅读更多...
计算机毕业设计之：基于微信小程序的校园流浪猫收养系统

计算机毕业设计之：基于微信小程序的校园流浪猫收养系统

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…
阅读更多...
Python类及元类的创建流程

Python类及元类的创建流程

Python类及元类的创建流程 代码运行结果再看type和object的关系和约定type和object具有的方法不一样看代码和运行结果&#xff0c;可以完全理解python的执行过程。再补充几点&#xff0c; 代码 class MetaCls(type):print(0>>>, MetaCls, 0)def __init__(self, name,…
阅读更多...
13.面试算法-字符串常见算法题（二）

13.面试算法-字符串常见算法题（二）

1. 字符串反转专题 我们知道反转是链表的一个重要考点&#xff0c;反转同样是字符串的重要问题。常见问题也就是在LeetCode中列举的相关题目&#xff1a; 【1】LeetCode344. 反转字符串&#xff1a;编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023