超简单的HTML5圣诞树代码哦
生活随笔
收集整理的這篇文章主要介紹了
超简单的HTML5圣诞树代码哦
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
啥也不說(shuō)，直接上代碼吧
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">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: -o-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);background: -ms-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);background: radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%); }/********************************************** DOM TREE*********************************************/@-webkit-keyframes spin {0% { -webkit-transform: rotateY( 0deg ); }100% { -webkit-transform: rotateY( 360deg ); } }@-moz-keyframes spin {0% { -moz-transform: rotateY( 0deg ); }100% { -moz-transform: rotateY( 360deg ); } }@-ms-keyframes spin {0% { -ms-transform: rotateY( 0deg ); }100% { -ms-transform: rotateY( 360deg ); } }@-o-keyframes spin {0% { -o-transform: rotateY( 0deg ); }100% { -o-transform: rotateY( 360deg ); } }@keyframes spin {0% { transform: rotateY( 0deg ); }100% { transform: rotateY( 360deg ); } } body {-webkit-perspective: 3000px;-moz-perspective: 3000px;-ms-perspective: 3000px;-o-perspective: 3000px;perspective: 3000px;-webkit-perspective-origin: 0 20%;-moz-perspective-origin: 0 20%;-ms-perspective-origin: 0 20%;-o-perspective-origin: 0 20%;perspective-origin: 0 20%; } .tree {margin: 0 auto;position: relative;-webkit-animation: spin 18s infinite linear;-moz-animation: spin 18s infinite linear;-ms-animation: spin 18s infinite linear;-o-animation: spin 18s infinite linear;animation: spin 18s infinite linear;-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;-ms-transform-origin: 50% 0;-o-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d; } .tree * {position: absolute;-webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;-ms-transform-origin: 0 0;-o-transform-origin: 0 0;transform-origin: 0 0; }</style></head><body><div class="tree"></div></body><script>(function() {var supports3DTransforms = document.body.style['perspectiveProperty'] !== undefined ||document.body.style['WebkitPerspective'] !== undefined ||document.body.style['MozPerspective'] !== undefined ||document.body.style['msPerspective'] !== undefined ||document.body.style['OPerspective'] !== undefined;if (!supports3DTransforms) {alert('Your browser doesn\'t support CSS3 3D transforms :/');}function transform(element, value) {element.style.WebkitTransform = value;element.style.MozTransform = value;element.style.msTransform = value;element.style.OTransform = value;element.style.transform = value;}var width = 500,height = 600,quantity = 250,types = ['text', 'select', 'progress', 'meter', 'button', 'radio', 'checkbox'],greetings = ['Joyeuses Fêtes', 'Felices Fiestas', 'God Jul', 'Boas Festas', 'Mutlu Bayramlar', 'Sarbatori Fericite', 'Jie Ri Yu Kuai', 'Bones Festes', 'Tanoshii kurisumasu wo', 'Buone Feste', 'Happy Holidays', 'Ii holide eximnandi', 'Frohe Feiertage', 'Prettige feestdagen', 'Beannachtaí na Féile', 'Vesele Praznike', 'Selamat Hari Raya', 'Sretni praznici'];var tree = document.querySelector('.tree'),treeRotation = 0;tree.style.width = width + 'px';tree.style.height = height + 'px';window.addEventListener('resize', resize, false);// The treefor (var i = 0; i < quantity; i++) {var element = null,type = types[Math.floor(Math.random() * types.length)],greeting = greetings[Math.floor(Math.random() * greetings.length)];var x = width / 2,y = Math.round(Math.random() * height);var rx = 0,ry = Math.random() * 360,rz = -Math.random() * 15;var 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 'radio':element = document.createElement('input');element.setAttribute('type', 'radio');if (Math.random() > 0.5) element.setAttribute('checked', '');break;case 'checkbox':element = document.createElement('input');element.setAttribute('type', 'checkbox');if (Math.random() > 0.5) element.setAttribute('checked', '');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';}transform(element, 'translate3d(' + x + 'px, ' + y + 'px, 0px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg) rotateZ(' + rz + 'deg)');tree.appendChild(element);}// The snowfor (var i = 0; i < 200; i++) {var element = document.createElement('input');element.setAttribute('type', 'radio');var spread = width * 2;var x = Math.round(Math.random() * spread) - (spread / 4),y = Math.round(Math.random() * height),z = Math.round(Math.random() * spread) - (spread / 2);var rx = 0,ry = Math.random() * 360,rz = 0;if (Math.random() > 0.5) element.setAttribute('checked', '');transform(element, '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();})()</script> </html>來(lái)看一下效果吧
這樣一個(gè)簡(jiǎn)單的圣誕樹(shù)就畫(huà)好啦
總結(jié)
以上是生活随笔為你收集整理的超简单的HTML5圣诞树代码哦的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： vue-router路由重复点击时报错的
- 下一篇： 武大博士后出站后应聘在社区做社工引热议，