纯CSS2020过渡2021动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  grid-template: 3em/3em;
  place-content: center;
  overflow: hidden;
  margin: 0;
  height: 100vh;
  background: #262626;
  font: 20vmin/1 lalezar, sans-serif;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
body, body *, body ::before, body ::after {
  display: grid;
  grid-area: 1/1;
}

.scene {
  overflow: hidden;
  clip-path: inset(0 round 5px);
  filter: contrast(0.85);
}
.scene::before {
  background: linear-gradient(90deg, #314065, #146a7c, #f0ab3d, #c271b4, #c20d90);
  content: "";
}

.rotor {
  place-self: center;
  width: 150%;
  height: 150%;
  grid-template-rows: 1fr 1fr;
  mix-blend-mode: multiply;
  animation: rotz 4s ease-in infinite;
}

@keyframes rotz {
  41%, 50% {
    transform: rotate(0.5turn);
  }
  91%, 100% {
    transform: rotate(1turn);
  }
}
.year {
  --i: 1;
  --not-i: calc(1 - var(--i));
  --not-k: calc(1 - var(--k));
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--k)*.5turn));
  background: hsla(0, 0%, calc(var(--k)*100%), var(--i));
  color: hsla(0, 0%, calc(var(--not-k)*100%), var(--i));
  text-shadow: 0 0 calc(var(--not-i)*19px) hsl(0, 0%, calc(var(--not-k)*100%));
  text-decoration: none;
}

[aria-hidden=true] {
  --i: 0 ;
}

del {
  --k: 0;
  mix-blend-mode: screen;
}

ins {
  --k: 1;
  mix-blend-mode: multiply;
}

time {
  place-self: end center;
  display: flex;
  align-items: baseline;
  padding: 0 0.25em;
  height: 1.5em;
  background: inherit;
  animation: move 4s ease-in infinite, blob calc(var(--i)*2s) ease-out infinite alternate;
  animation-delay: calc(var(--k)*-2s);
}
time::before, time::after {
  display: grid;
  align-items: end;
  height: 100%;
  content: "";
}

@keyframes move {
  41%, 50% {
    transform: translatey(calc(1ch + 19px));
  }
  0%, 91%, 100% {
    transform: translatey(1px);
  }
}
@keyframes blob {
  82%, 100% {
    filter: blur(13px) contrast(39);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg