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

马coder

于 2024-02-13 00:15:00 发布

阅读量380

点赞数 6

文章标签： javascript 3d 开发语言

本文链接：https://blog.csdn.net/weixin_38343072/article/details/136064343

版权

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的万花筒动画特效