37 lines
1.1 KiB
HTML
37 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||
|
||
<title>旋转的圣诞树</title>
|
||
<link rel="stylesheet" href="../css/76.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="star"></div>
|
||
<ul class="tree" id="tree"></ul>
|
||
<script>
|
||
// 构造一棵树
|
||
function createTree(){
|
||
for(let i=0;i<128;i++){
|
||
// 创建li元素
|
||
let li=document.createElement('li');
|
||
// 设置li元素的样式
|
||
// --h、--d为自定义属性，可通过var函数对其调用
|
||
// --h：线条高度
|
||
// --d：动画的延迟时间
|
||
li.style.cssText='--h:calc(60vh / 128 * '+i+');--d:calc(-28s / 128 * '+i+');';
|
||
// 追加li元素
|
||
document.getElementById('tree').appendChild(li);
|
||
}
|
||
}
|
||
window.addEventListener('load',()=>{
|
||
// 加载完毕后，构建树
|
||
createTree();
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html> |