JS特效第145弹：canvas画布3D的万花筒动画特效

作者：Gausst松鼠会 | 2024-02-16 05:12:38

踩

html5基于canvas绘制3D酷炫的万花筒无限延伸动画特效，先来看看效果：

一部分关键的代码如下：


<!DOCTYPE html>
<html lang="en" >
 
<head>
<meta charset="UTF-8">
<title>canvas画布3D的万花筒动画特效</title>
 
 
 
<link rel="stylesheet" href="css/style.css">
 
 
</head>
 
<body>
 
  <style>
  css-doodle {
    --color: @p(#51eaea, #fffde1, #ff9d76, #FB3569);
      
    --rule: (
      :doodle {
        @grid: 30x1 / 18vmin;
        --deg: @p(-180deg, 180deg);
      }
      :container {
        perspective: 30vmin;
      }
      :after, :before {
        content: '';
        background: var(--color); 
        @place-cell: @r(100%) @r(100%);
        @size: @r(6px);
        @shape: heart;
      }
    
      @place-cell: center;
      @size: 100%;
    
      box-shadow: @m(2, (0 0 50px var(--color)));
      background: @m(100, (
        radial-gradient(var(--color) 50%, transparent 0) 
        @r(-20%, 120%) @r(-20%, 100%) / 1px 1px
        no-repeat
      ));
    
      will-change: transform, opacity;
      animation: scale-up 12s linear infinite;
      animation-delay: calc(-12s / @size() * @i());
 
      @keyframes scale-up {
        0%, 95.01%, 100% {
          transform: translateZ(0) rotate(0);
          opacity: 0;
        }
        10% { 
          opacity: 1; 
        }
        95% {
          transform: 
            translateZ(35vmin) rotateZ(@var(--deg));
        }
      }
    )
  }
</style>
 
<css-doodle use="var(--rule)"></css-doodle>
 
<script src='js/css-doodle.min.js'></script>
 
  
 
</body>
 
</html>

全部代码：canvas画布3D的万花筒动画特效

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/90986