js+svg实现网飞版三体中倒计时动画效果代码-html代码-BFW代码库

js+svg实现网飞版三体中倒计时动画效果代码

代码语言：html

所属分类：动画

代码描述：js+svg实现网飞版三体中倒计时动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
<style>
:root {
  --transition-animation-duration: 0.25s;
  --bg-x: -25%;
  --bg-y: -25%;
}

html,
body {
  height: 100%;
  background: #030507;
  display: flex;
  flex-direction: row;
  place-items: center;
  place-content: center;
}

templates {
  display: none;
}

.flex {
  display: flex;
  flex-direction: row;
  place-items: center;
  place-content: center;
}

.countdown {
  width: 500px;
  max-width: 90vw;
}

.digit,
.divider {
  display: flex;
  margin: 0 -10px;
}
.digit svg,
.divider svg {
  width: 100%;
}
.digit svg path:last-of-type,
.divider svg path:last-of-type {
  transform: scaleY(2.5) scaleX(0.4) !important;
  filter: blur(20px) !important;
}

.digit {
  transition: var(--transition-animation-duration) cubic-bezier(0, 0, 0, 0.97);
}
.digit.animate-transition {
  transform: scale(1.1);
  mix-blend-mode: plus-lighter;
  filter: brightness(1.5) drop-shadow(2px 2px 14px #d1450e);
}
.digit.animate-transition path {
  stroke: rgba(255, 106, 40, 0.95) !important;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("//repo.bfw.wiki/bfwrepo/image/660f2b8d124d4.png");
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  transform: translateX(var(--bg-x)) translateY(var(--bg-y)) scale(1.5);
  animation: blink 1s ease-out infinite alternate;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(ellipse, transparent 50%, #000);
}

@keyframes blink {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.1;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.1;
  }
}
.credits {
  position: absolute;
  font-family: sans-serif;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  color: #df6c1e;
  text-shadow: 0 0px 8px #ca3c05;
  font-size: 0.9rem;
}
.credits:not(:hover) {
  opacity: 0.4;
}
.credits a {
  color: #df6c1e;
}
</style>

  
  
  
</head>

<body translate="no">
  <templates>

  <svg id="number-0" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M79 14 C62 24 28 49 27 58 C25 70 24 103 18 126 C13 149 24 196 38 212 C52 228 71 222 79 226 C87 231 112 231 118 226 C124 222 145 204 149 204 C154 204 157 162 153 144 C149 126 169 103 159 73 C149 43 132 21 112 20" stroke="#FD7427" stroke-width="1.........完整代码请登录后点击上方下载按钮下载查看