js实现菱形动态背景效果代码
代码语言:html
所属分类:背景
代码描述:js实现菱形动态背景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<style>
html {
background: radial-gradient(ellipse at center, #ef0e39 0%, black 100%);
overflow: hidden;
}
</style>
</head>
<body>
<div id="bg">
</div>
<script>
var refreshDuration = 10000;
var refreshTimeout;
var numPointsX;
var numPointsY;
var unitWidth;
var unitHeight;
var points;
function onLoad() {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', window.innerWidth);
svg.setAttribute('height', window.innerHeight);
document.querySelector('#bg').appendChild(svg);
var unitSize = (window.innerWidth+window.innerHeight)/20;
numPointsX = Math.ceil(window.innerWidth/unitSize)+1;
numPointsY = Math.ceil(window.innerHeight/unitSize)+1;
unitWidth = Math.ceil(window.innerWidth/(numPointsX-1));
unitHeight = Math.ceil(window.inn.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0