侧边栏壁纸
  • 累计撰写 25 篇文章
  • 累计创建 27 个标签
  • 累计收到 43 条评论

目 录CONTENT

文章目录

三分钟 get 一个爱心万花筒网页

junior
2022-11-11 / 0 评论 / 23 点赞 / 2,773 阅读 / 1,542 字

网页预览

预览地址: http://junior-l.gitee.io/love-tunnel
擷取35

源码下载

下载地址:https://t.doruo.cn/EFVXqJ1e
下载之后解压将 index.html 文件使用浏览器打开

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>

<body id="m_body">

<css-doodle use="var(--rule)"></css-doodle>
<script src="css-doodle.min.js"></script>
<script>
    function remove_attr() {
        let c = document.getElementsByTagName('css-doodle')[0].doodle.lastChild.firstChild;
        c.style.boxShadow = 'none';
    }
    remove_attr()
</script>
</body>
</html>

css部分


html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #270F34;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  contain: content;
  overflow: clip;
}
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: @m2(0 0 50px var(--color));
      background: @m100(
        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 / @I * @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));
        }
      }
    )
}
23

评论区