💦 今天是圣誕節
💦 在忙碌的生活中，儀式感還是要有的，今天小禪使用代碼繪制了顆圣誕樹
💦 祝大家圣誕快樂！
1.動態旋轉圣誕樹
實作效果如下
代碼參考，具體的CSS與js代碼較多這里就不展示出來了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="程式員的圣誕樹" />
<meta name="author" content="" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>圣誕樹</title>
<link href="./css/ui.css" rel="stylesheet" media="screen" />
<link href="./css/domtree.css" rel="stylesheet" media="screen" />
<link href='https://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./css/audiobtn.css">
<script type="text/javascript" src="./js/audiobtn.js" ></script>
</head>
<body>
<!-- 圣誕樹 -->
<div class="tree"><h1>小禪祝大家圣誕節快樂</h1></div>
<script src="./js/domtree.js"></script>
<div class="credits">
<a href="https://blog.csdn.net/weixin_45574790">大資料小禪</a>
<a href="https://note.youdao.com/s/9C8WpXFW">獲取源代碼</a>
</div>
<script>
var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
</body>
</html>
2.閃爍圣誕樹
實作效果如下
代碼參考，具體的CSS與js代碼較多這里就不展示出來了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>圣誕快樂</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<ul class="bgg">
<li class="sphere"></li>
<p class="text">小禪祝大家圣誕快樂</p>
</ul>
<ul class="tree">
<li class="top-star"> </li>
<li class="top">
<ul class="tree-pts">
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
</ul>
</li>
</body>
</html>
3.祝福語
年尾將之，一顆圣誕樹就代表著一份平安與幸運，在這里將最好的祝福送給你，祝各位圣誕快樂！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/392151.html
標籤：其他