基于Html5+CSS3+JS的3D动态圣诞树

最新推荐文章于 2023-01-03 13:26:28 发布

Java烂笔头any

最新推荐文章于 2023-01-03 13:26:28 发布

阅读量1.8k

点赞数 2

分类专栏：项目文章标签：前端 css javascript

原文链接：https://blog.csdn.net/qq_53673551/article/details/122028026

版权

项目专栏收录该内容

37 篇文章 17 订阅

订阅专栏

一、前言

最近CSDN的热榜出现了很多用Python、C/C++等编程语言实现的圣诞树，发现很少用前端的，这篇文章用前端三大杀手Html5、CSS、Js来实现动态圣诞树。

二、圣诞树

效果展示：

备注：

整体圣诞树分为3个部分，书的主干、粒子特效、树上的卡片

树上的卡片(重点)：每一张卡片上都有一个名字，代表圣诞树的叶子，后面可以根据自己需求更改，比如全部改成喜欢人的名字，在JS代码的第五行内更改内容

树的动态旋转通过js实现、主干是html5、样式CSS

三、编码实现

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="css/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="js/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();

源码获取

关注微信公众号：Java烂笔头

对话框回复关键词：圣诞树

直接获取源码

点赞、评论+关注！

————————————————

原文链接：https://blog.csdn.net/qq_53673551/article/details/122028026

Java烂笔头any

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
基于Html5+CSS3+JS的3D动态圣诞树

一、前言最近CSDN的热榜出现了很多用Python、C/C++等编程语言实现的圣诞树，发现很少用前端的，这篇文章用前端三大杀手Html5、CSS、Js来实现动态圣诞树。二、圣诞树效果展示：备注：整体圣诞树分为3个部分，书的主干、粒子特效、树上的卡片树上的卡片(重点)：每一张卡片上都有一个名字，代表圣诞树的叶子，后面可以根据自己需求更改，比如全部改成喜欢人的名字，在JS代码的第五行内更改内容树的动态旋转通过js实现、主干是html5、样式CSS...
复制链接

扫一扫

专栏目录