超简单的HTML5圣诞树代码哦
生活随笔
收集整理的這篇文章主要介紹了
超简单的HTML5圣诞树代码哦
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
啥也不說，直接上代碼吧
<!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>來看一下效果吧
這樣一個簡單的圣誕樹就畫好啦
總結
以上是生活随笔為你收集整理的超简单的HTML5圣诞树代码哦的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue-router路由重复点击时报错的
- 下一篇： 2017年html5行业报告,云适配发布