当前位置: article > 正文

奔梦向前-代码实现炫酷网页特效-2020-04-28-8_前端绚丽的页面代码怎么写

作者：Cpp五条 | 2024-02-15 14:57:39

赞

踩

前端绚丽的页面代码怎么写

下面是整体代码，按键Ctrl+C复制，复制完粘贴到记事本里面，把.txt后缀改成.html然后打开就可以看到这个炫酷的特效了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>编程特趣</title>
<style>
html,body {
   margin:0;
   padding:0;
   overflow:hidden;
   background-color:#000000
}
body {
   height:100vh;
   display:flex;
   align-items:center;
   justify-content:center;
}
.canvas {
   display:block;
   border-radius:50%;
}
.canvas-pattern {
   display:none;
}
</style>

</head>
<body>

<canvas class="canvas canvas-pattern js-canvas" width="500" height="500"></canvas>
<canvas class="canvas js-duplicate" width="500" height="500"></canvas>

<script type="text/javascript">
const canvas = document.querySelector('.js-canvas');
const ctx = canvas.getContext('2d');

const canvas2 = document.querySelector('.js-duplicate');
const ctx2 = canvas2.getContext('2d');

const dim = Math.min(window.innerWidth, window.innerHeight) * 0.95;
const w = dim;
const h = dim;
const midX = w >> 1;
const midY = h >> 1;

const PI = Math.PI;
const TO_RADIAN = PI / 180;

const maxDepth = 5;
const maxSpread = 90 * TO_RADIAN;

let autoAnimate = true;
let divergeAt = 0.5;

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

推荐阅读

相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

闽ICP备14008679号