svg+js实现炫酷鼠标交互的立体重影倒计时动画效果代码-html代码-BFW代码库

svg+js实现炫酷鼠标交互的立体重影倒计时动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现炫酷鼠标交互的立体重影倒计时动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 800px;

  * { transform-style: preserve-3d; }
}

.svgs {
  position: relative;
  transform: rotateY(calc(var(--x, 0.1) * 40deg)) rotateX(calc(var(--y, 0.1) * -40deg));
}

svg {
  position: absolute;
  inset: -210px;
  transform: translateZ(calc((24 - var(--svg)) * -84px));
  --color: hsl(var(--hue, 0) 100% calc(var(--svg) * 4%))
}

.num {
  font-family: "Alfa Slab One", serif;
  fill: white;
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 240px;
}
</style>


  
  
</head>

<body translate="no">
  <div class="svgs">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 0;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 1;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 2;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 3;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 4;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 5;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 6;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 7;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 8;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 9;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 10;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" style="--svg: 11;"></svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 420 420" sty.........完整代码请登录后点击上方下载按钮下载查看