當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
200行Html5+CSS3+JS代码实现动态圣诞树
生活随笔
收集整理的這篇文章主要介紹了
200行Html5+CSS3+JS代码实现动态圣诞树
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?一、前言??
- 最近CSDN的熱榜出現了很多用Python、C/C++等編程語言實現的圣誕樹，發現很少用前端的，這篇文章用前端三大殺手Html5、CSS、Js來實現動態圣誕樹。
?二、圣誕樹
效果展示：
備注：
- 整體圣誕樹分為3個部分，書的主干、粒子特效、樹上的卡片
- 樹上的卡片(重點)：每一張卡片上都有一個名字，代表圣誕樹的葉子，后面可以根據自己需求更改，比如全部改成喜歡人的名字，在JS代碼的第五行內更改內容
- 樹的動態旋轉通過js實現、主干是html5、樣式CSS
三、步驟
1.下載VSCode
下載鏈接：VSCode
- 在Hbuilder、idea運行也是可以的，這里推薦使用VSCode
2.配置插件
三個插件對應的功能：?
- 改寫標簽后自動完善
- 切換成中文頁面
- 讓代碼在網頁中打開，默認鍵Alt+B
3.構建三個文件
- 在桌面新建一個空的文件夾，用VSCode打開
- 在VSCode新建三個文件 index .html? ?domtree.css? ?domtree.js? （文件名字要和這個一樣，不然會出錯），保存別忘了
- 對于文件的層級問題，三個index .html? ?domtree.css? ?domtree.js 在同一級文件夾內不要修改，如果在下一個層級或者上面一個層級需要改動選擇
- 在index.html代碼界面，默認鍵Alt+B 或者 鼠標右擊，選擇倒數第三個Open In? Default? Browser默認瀏覽器打開
4.添加額外功能
修改背景：
- Css代碼的第39到43行，可以更改不同的背景顏色或者背景圖片，鼠標放在紅色的框上面會出現，上圖所示的一個顏色選擇，拉動就可以選擇不同的顏色背景
添加音樂：
-
在index.html代碼中的第23行添加下列代碼：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <embed src="song.mp3" hidden="false" autostart="true" loop="true">
- src="音樂地址"，把想要播放的音樂，提前放到這個文件夾中，把這個音樂的命名填入src中就可以播放音樂
- hidden="true"表示隱藏音樂播放按鈕，hidden="false"開啟音樂播放按鈕
- autostart="true" 打開網頁加載完后自動播放
- loop="true"循環播放 如僅想播放一次則為：loop="false"
修改卡片上的內容：
- 圣誕樹上面的卡片是由不同的類型的，有的卡片可以下拉查看下面的內容
- 圣誕樹上面的卡片是可以修改內容的，在JS代碼的第五行的const greetings = [ ?]修改，把里面的內容換成你想要的就行，如果葉子不夠，在后面還可以加入。
四、編碼實現
CSS代碼：
/********************************************** RESET*********************************************/html{color:#000;background:#222222;} a{cursor:pointer;} html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} /* h1,h2,h3,h4,h5,h6{font-size:100%;} */ q:before,q:after{content:'';} abbr,acronym {border:0;font-variant:normal;} sup {vertical-align:text-top;} sub {vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;} legend{color:#000;} a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;} /*input[type="Submit"]{cursor:pointer;}*/ strong {font-weight: bold;}/********************************************** GLOBAL*********************************************/body, html {overflow: hidden;font-family: Helvetica, Arial, sans-serif;color: #fff;font-size: 11px;width: 100%;height: 100%;background: #b72424;background: -moz-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b72424), color-stop(100%,#492727));background: -webkit-radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);background: radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%); }@keyframes spin {0% { transform: rotateY( 0deg ); }100% { transform: rotateY( 360deg ); } }body {perspective: 3000px;perspective-origin: 0 20%; }.tree {margin: 0 auto;position: relative;animation: spin 18s infinite linear;transform-origin: 50% 0;transform-style: preserve-3d; }.tree * {position: absolute;transform-origin: 0 0; }Html代碼：?
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta name="description" content="A Christmas tree built out of form elements." /><meta name="author" content="Hakim El Hattab" /><meta http-equiv="X-UA-Compatible" content="chrome=1"><title>DOM Tree</title><link href="domtree.css" rel="stylesheet" media="screen" /><link href='https://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'></head><body><div class="tree"></div><script src="domtree.js"></script><!-- Third party scripts and sharing UI --><p class="project-title">DOM Tree</p><div class="credits"><a href="https://blog.csdn.net/qq_53673551?spm=1000.2115.3001.5343">知心寶貝</a><a href="https://twitter.com/hakimel">文章代碼參考@hakimel</a></div><style type="text/css" media="screen">.project-title {position: absolute;left: 25px;bottom: 20px;font-size: 16px;color: #fff;}.credits {position: absolute;right: 20px;bottom: 25px;font-size: 15px;z-index: 20;color: #fff;vertical-align: middle;}.credits * + * {margin-left: 15px;}.credits a {padding: 8px 10px;color: rgba(255,255,255,0.7);border: 2px solid rgba(255,255,255,0.7);text-decoration: none;}.credits a:hover {border-color: #fff;color: #fff;}@media screen and (max-width: 1040px) {.project-title {display: none;}.credits {width: 100%;left: 0;right: auto;bottom: 0;padding: 30px 0;background: #b72424;text-align: center;}.credits a {display: inline-block;margin-top: 7px;margin-bottom: 7px;}}</style><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>JS代碼：?
const width = 500; const height = 600; const quantity = 150; const types = [ 'text', 'select', 'progress', 'meter', 'button', 'radio', 'checkbox' ]; const greetings = [ '知心寶貝','知心寶貝','Merry Christmas','Merry Christmas','Merry Christmas','Merry Christmas','知心寶貝','12月25','知心寶貝','Merry Christmas','Happy Holidays', ' 知心寶貝','12月25','知心寶貝','Merry Christmas','知心寶貝','Merry Christmas','知心寶貝' ]; let tree = document.querySelector( '.tree' ),treeRotation = 0;tree.style.width = width + 'px'; tree.style.height = height + 'px';window.addEventListener( 'resize', resize, false );// The tree for( var i = 0; i < quantity; i++ ) {let element = null,type = types[ Math.floor( Math.random() * types.length ) ],greeting = greetings[ Math.floor( Math.random() * greetings.length ) ];let x = width/2,y = Math.round( Math.random() * height );let rx = 0,ry = Math.random() * 360,rz = -Math.random() * 15;let elemenWidth = 5 + ( ( y / height ) * width / 2 ),elemenHeight = 26;switch( type ) {case 'button':element = document.createElement( 'button' );element.textContent = greeting;element.style.width = elemenWidth + 'px';element.style.height = elemenHeight + 'px';break;case 'progress':element = document.createElement( 'progress' );element.style.width = elemenWidth + 'px';element.style.height = elemenHeight + 'px';if( Math.random() > 0.5 ) {element.setAttribute( 'max', '100' );element.setAttribute( 'value', Math.round( Math.random() * 100 ) );}break;case 'select':element = document.createElement( 'select' );element.setAttribute( 'selected', greeting );element.innerHTML = '<option>' + greetings.join( '</option><option>' ) + '</option>';element.style.width = elemenWidth + 'px';element.style.height = elemenHeight + 'px';break;case 'meter':element = document.createElement( 'meter' );element.setAttribute( 'min', '0' );element.setAttribute( 'max', '100' );element.setAttribute( 'value', Math.round( Math.random() * 100 ) );element.style.width = elemenWidth + 'px';element.style.height = elemenHeight + 'px';break;case 'text':default:element = document.createElement( 'input' );element.setAttribute( 'type', 'text' );element.setAttribute( 'value', greeting );element.style.width = elemenWidth + 'px';element.style.height = elemenHeight + 'px';}element.style.transform = `translate3d(${x}px, ${y}px, 0px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;tree.appendChild( element ); }// Let it snow for( var i = 0; i < 200; i++ ) {let element = document.createElement( 'input' );element.setAttribute( 'type', 'radio' );let spread = window.innerWidth/2;let x = Math.round( Math.random() * spread ) - ( spread / 4 ),y = Math.round( Math.random() * height ),z = Math.round( Math.random() * spread ) - ( spread / 2 );let rx = 0,ry = Math.random() * 360,rz = 0;if( Math.random() > 0.5 ) element.setAttribute( 'checked', '' );element.style.transform = `translate3d(${x}px, ${y}px, ${z}px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;tree.appendChild( element ); }function resize() {tree.style.top = ( ( window.innerHeight - height - 100 ) / 2 ) + 'px'; }resize();附錄：
零基礎必看的Html5+Css3+移動端前端教程（一）
零基礎必看的Html5+Css3+移動端前端教程(二)
零基礎必看的Html5+Css3+移動端前端教程(三)
零基礎必看的Html5+Css3+移動端前端教程(四)
零基礎必看的Html5+Css3+移動端前端教程(五)
總結
以上是生活随笔為你收集整理的200行Html5+CSS3+JS代码实现动态圣诞树的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux 下wifi 驱动开发（一）—
- 下一篇： 情人节程序员用HTML网页表白【华丽满屏