您的位置：首页 > 编程语言

奔梦向前-代码实现网页版梦幻世界-2020-04-26

2020-06-05 05:38 260 查看

下面是HTML代码，大家复制即可，由于JS的代码较多，所以链接我给大家放上面了，大家下载就行了，然后就可以打开这个代码开始学习了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>编程特趣</title>
<style>
html, body { 
  height: 100%; 
  margin: 0; 
  background: #270F34; 
  overflow: hidden; 
}
body {
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
</style>

</head>
<body>

<script type="text/javascript" src="js/css-doodle.min.js"></script>

<style>
  css-doodle {
    --color: @p(#51eaea, #fffde1, #ff9d76, #FB3569);
    --filter: @svg-filter(<svg>
      <filter>
        <feTurbulence
          type="fractalNoise"
          baseFrequency=".08"
          numOctaves="2"
          seed="200"
        />
        <feDisplacementMap
          in="SourceGraphic"
          scale="100"
        />
      </filter>
    </svg>);

    --rule: (
      :doodle {
        @grid: 30x1 / 18vmin;
      }
      :container {
        perspective: 30vmin;
      }

      @place-cell: center;
      @size: 100%;
    
      :after, :before {
        content: '';
        @size: 100%;
        position: absolute;
        border: 2.4vmin solid var(--color);
        border-image: radial-gradient(
          var(--color), transparent 60%
        );
        border-image-width: 4;
        transform: rotate(@pn(0, 5deg));
      }

      will-change: transform, opacity;
      animation: scale-up 15s linear infinite;
      animation-delay: calc(-15s / @size() * @i());
      box-shadow: inset 0 0 1em var(--color);
      border-radius: 50%;
      filter: var(--filter); 
    
      @keyframes scale-up {
        0%, 100% {
          transform: translateZ(0) scale(0) rotate(0);
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        99% {
          transform: 
            translateZ(30vmin) 
            scale(1) 
            rotate(-270deg);
        }
      }
    )
  }
</style>
<css-doodle use="var(--rule)"></css-doodle>
</body>
</html>

一起来看效果！

1、感谢你支持！如果大佬们把代码按照图片尝试不显示的话，可以切换兼容性的浏览器，例如：Google、搜狗浏览器、360浏览器，切记：不要使用windos自带的浏览器，IE浏览器，最好是使用Google。
2、每天不断学习编程提升自己的编程知识，继续加油。
有情提示：上面说的都尝试了，还是没有出现以上图片的效果，大家可以尝试登陆账号下载文件即可，祝你每天开心学编程。
3、奔梦向前祝你天天开心学编程，网页设计本身就是属于小白的入门课程，所以小白们你们可要加油！相信自己一定可以坚持学下去，学精他，到时候自己独立制作一个属于自己的网页界面，分享给你自己的朋友。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航