devbox
在线问答5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML2022年圣诞节专属你的圣诞树来了_圣诞树炫酷网页

作者：在线问答5 | 2024-08-10 22:26:45

赞

踩

圣诞树炫酷网页

圣诞节搞一波，送给专属你或者你的另一半的圣诞树。搞起来！！！！！

  1. <doctype html>
  2. <html lang="en">
  3.     <style>
  4.         html,body {
  5.             width: 100%;
  6.             height: 100%;
  7.         }
  8.  
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.  
  14.         body {
  15.             background-color: #8686a0;
  16.         }
  17.  
  18.         .word {
  19.             font-size: 22px;
  20.             text-align: center;
  21.             color: gold;
  22.             padding-top: 50px;
  23.             letter-spacing: 5px;
  24.             text-shadow: 2px 4px 9px rgba(255,255,255,0.7);
  25.         }
  26.  
  27.         .word1 {
  28.             font-size: 13px;
  29.             text-align: center;
  30.             color: rgb(235, 17, 206);
  31.             padding-top: 50px;
  32.             letter-spacing: 5px;
  33.             text-shadow: 2px 4px 9px rgba(255,255,255,0.7);
  34.         }
  35.  
  36.         .word2 {
  37.             font-size: 16px;
  38.             text-align: center;
  39.             color: rgb(241, 14, 204);
  40.             padding-bottom: 50px;
  41.             letter-spacing: 5px;
  42.             text-shadow: 2px 4px 9px rgba(255,255,255,0.7);
  43.         }
  44.  
  45.         /*圣诞树外层div*/
  46.         .tree {
  47.             width: 200px;
  48.             height: 300px;
  49.             margin: 80px auto 0 auto;
  50.             position: relative;
  51.             /*相对定位*/
  52.         /*     border: 1px solid #fff; */
  53.         }
  54.  
  55.         .star {
  56.             width: 50px;
  57.             height: 50px;
  58.             position:absolute;
  59.             background-color:#fff;
  60.             border-radius:50%;
  61.             top:-25px;
  62.             z-index:1000;
  63.             left:50%;
  64.             transform:translateX(-50%);
  65.             animation:starLight 1.5s ease infinite alternate;
  66.         }
  67.         .star-in{
  68.             position:absolute;
  69.             left:50%;
  70.             top:50%;
  71.             border-right:100px solid transparent;
  72.             border-bottom:70px solid gold;
  73.             border-left:100px solid transparent;
  74.             transform:translateX(-50%) translateY(-50%) rotate(35deg) 
  75.             scale(0.14);
  76.         }
  77.         .star-in:before{
  78.             border-bottom: 80px solid gold;
  79.             border-left: 30px solid transparent;
  80.             border-right: 30px solid transparent;
  81.             position:absolute;
  82.             top:-45px;
  83.             left:-65px;
  84.             content:'';
  85.             transform:rotate(-35deg);
  86.         }
  87.         .star-in:after{
  88.             border-bottom: 70px solid gold;
  89.             border-left: 100px  solid transparent;
  90.             border-right: 100px  solid transparent;
  91.             position:absolute;
  92.             top:3px;
  93.             left:-105px;
  94.             content:'';
  95.             transform:rotate(-70deg);
  96.         }
  97.         @keyframes starLight{
  98.             0% {
  99.                 background: radial-gradient(ellipse at center, 
  100.                 gold 0%, rgba(255, 240, 158, 0.5) 42%,
  101.                 rgba(129, 125, 102, 0.2) 58%,
  102.                 rgba(255, 255, 255, 0.1) 100%);
  103.             }
  104.             25% {
  105.                 background: radial-gradient(ellipse at center, gold 0%,
  106.                 rgba(255, 240, 158, 0.5) 40%,
  107.                 rgba(255, 242, 173, 0.2) 60%, 
  108.                 rgba(255, 255, 255, 0.1) 100%);
  109.             }
  110.             50% {
  111.                 background: radial-gradient(ellipse at center,
  112.                 gold 0%, rgba(255, 240, 158, 0.5) 38%, 
  113.                 rgba(255, 242, 173, 0.2) 62%,
  114.                 rgba(255, 255, 255, 0.1) 100%);
  115.             }
  116.             75% {
  117.                 background: radial-gradient(ellipse at center,
  118.                 gold 0%, rgba(255, 240, 158, 0.5) 36%,
  119.                 rgba(255, 242, 173, 0.2) 64%, 
  120.                 rgba(255, 255, 255, 0.1) 100%);
  121.             }
  122.             100% {
  123.                 background: radial-gradient(ellipse at center,
  124.                 gold 0%, rgba(255, 240, 158, 0.5) 34%,
  125.                 rgba(255, 242, 173, 0.2) 66%,
  126.                 rgba(255, 255, 255, 0.1) 100%);
  127.             }
  128.         }
  129.         .leaf{
  130.             position:absolute;
  131.             left:50%;
  132.             top:3%;
  133.             margin-left:-30px;
  134.             background-color:rgb(24, 143, 24);
  135.             width:60px;
  136.             height:60px;
  137.             border-radius:0 10px 35px 10px ;
  138.             transform:rotate(45deg);
  139.             box-shadow:2px 7px 2px rgba(43,43,43,0.2);
  140.         }
  141.         .edge{
  142.             position:absolute;
  143.             left:0;
  144.             bottom:0;
  145.             background:rgb(24, 143, 24);
  146.             width:25px;
  147.             height:30px;
  148.             border-radius:0 10px 35px 10px;
  149.             transform:translateY(50%) translateX(0);
  150.         }
  151.         .edge.right{
  152.             position:absolute;
  153.             left: unset;
  154.             bottom: unset;
  155.             top: 0;
  156.             right: 0;
  157.             background:rgb(24, 143, 24);
  158.             width:25px;
  159.             height:30px;
  160.             border-radius:0 10px 35px 10px;
  161.             transform:translateY(0) translateX(50%);
  162.         }
  163.         /*双数修改背景色*/
  164.         .leaf:nth-child(even){
  165.             background-color: #42cf42;
  166.         }
  167.         .leaf:nth-child(even) .edge{
  168.             background-color: #42cf42;
  169.         }
  170.         /*最上面*/
  171.         .leaf:nth-child(1){
  172.             z-index:100;
  173.             transform: rotate(45deg) scale(0.8) ;
  174.         }
  175.         /*第二*/
  176.         .leaf:nth-child(2) {
  177.             z-index: 99;
  178.             top: 15%;
  179.             transform: rotate(45deg) scale(1.3) ;
  180.         }
  181.         .leaf:nth-child(3) {
  182.             z-index: 98;
  183.             top: 28%;
  184.             transform: rotate(45deg) scale(1.6) ;
  185.         }
  186.         .leaf:nth-child(4) {
  187.             z-index: 97;
  188.             top: 41%;
  189.             transform: rotate(45deg) scale(1.9) ;
  190.         }
  191.         .leaf:nth-child(5) {
  192.             z-index: 96;
  193.             top: 54%;
  194.             transform: rotate(45deg) scale(2.2) ;
  195.         }
  196.         .trunk{
  197.             width:25px;
  198.             height:45px;
  199.             border-radius:0 0 3px 3px;
  200.             position:absolute;
  201.             left:50%;
  202.             transform:translateX(-50%);
  203.             bottom:20px;
  204.             z-index:1;
  205.             box-shadow:0 0 10px 5px rgb(19,19,19);
  206.             background:linear-gradient(0deg,#6d411b 0%,#5a341d 64%);
  207.         }
  208.         .ball{
  209.             width:20px;
  210.             height:20px;
  211.             background:#f00;
  212.             box-shadow:-1px -1px 6px inset rgb(167, 3, 3),1px 1px 8px inset #f8d9d9;
  213.             border-radius:50%;
  214.             z-index:101;
  215.             position:absolute;
  216.         }
  217.         .b1{
  218.             left: 25%;
  219.             top: 30%;
  220.         }
  221.         .b2 {
  222.             left: 35%;
  223.             top: 50%;
  224.         }
  225.         .b3 {
  226.             left: 65%;
  227.             top: 20%;
  228.         }
  229.         .b4 {
  230.             left: 45%;
  231.             top: 22%;
  232.         }
  233.         .b5 {
  234.             left: 40%;
  235.             top: 72%;
  236.         }
  237.         .b6 {
  238.             left: 60%;
  239.             top: 52%;
  240.         }
  241.         .b7 {
  242.             left: 50%;
  243.             top: 62%;
  244.         }
  245.         .b8 {
  246.             left: 80%;
  247.             top: 42%;
  248.         }
  249.         .b9 {
  250.             left: 10%;
  251.             top: 62%;
  252.         }
  253.         .b4,.b5,.b6{
  254.             background:#ececec;
  255.             box-shadow:-1px -1px 6px inset #c9c5c5,1px 1px 8px inset #fff;
  256.         }
  257.         .b7,.b8,.b9{
  258.             background:gold;
  259.             box-shadow: -1px -1px 6px inset #aa9208, 1px 1px 8px inset #fff;
  260.         }
  261.         .sparkle span{
  262.             display:block;
  263.             position:absolute;
  264.             font-size:20px;
  265.             z-index:101;
  266.             color:#fff;
  267.             animation:lights 1.5s ease infinite alternate;
  268.         }
  269.         /*闪烁动画*/
  270.         @keyframes lights{
  271.             0%,100%{
  272.                 transform:scale(1);
  273.             }
  274.             50%{
  275.                 transform:scale(1.5);
  276.             }
  277.         }
  278.         .sparkle span:nth-child(1) {
  279.             left: 30%;
  280.             top: 40%;
  281.         }
  282.         .sparkle span:nth-child(2) {
  283.             left: 40%;
  284.             top: 27%;
  285.             font-size: 15px;
  286.         }
  287.         .sparkle span:nth-child(3) {
  288.             left: 50%;
  289.             top: 57%;
  290.             font-size: 12px;
  291.         }
  292.         .sparkle span:nth-child(4) {
  293.             left: 70%;
  294.             top: 67%;
  295.             font-size: 14px;
  296.         }
  297.         .sparkle span:nth-child(5) {
  298.             left: 74%;
  299.             top: 13%;
  300.             font-size: 16px;
  301.         }
  302.         .blink div{
  303.         width:4px;
  304.         height:4px;
  305.         background:#fff;
  306.         z-index:101;
  307.         position:absolute;
  308.         border-radius:50%;
  309.         animation:blink 1.5s ease infinite alternate;    
  310.         }
  311.         .blink div:nth-child(2) {
  312.             left: 34%;
  313.             top: 13%;
  314.             transform: scale(1.2);
  315.         }
  316.         .blink div:nth-child(3) {
  317.             left: 54%;
  318.             top: 43%;
  319.             transform: scale(0.7);
  320.         }
  321.         .blink div:nth-child(4) {
  322.             left: 64%;
  323.             top: 33%;
  324.             transform: scale(1.4);
  325.         }
  326.         .blink div:nth-child(5) {
  327.             left: 34%;
  328.             top: 63%;
  329.             transform: scale(1.8);
  330.         }
  331.         .blink div:nth-child(6) {
  332.             left: 14%;
  333.             top: 76%;
  334.             transform: scale(1.6);
  335.         }
  336.         .blink div:nth-child(7) {
  337.             left: 64%;
  338.             top: 79%;
  339.             transform: scale(1.6);
  340.         }
  341.         .blink div:nth-child(8) {
  342.             left: 80%;
  343.             top: 50%;
  344.             transform: scale(1.6);
  345.         }
  346.         .blink div:nth-child(9) {
  347.             left: 83%;
  348.             top: 20%;
  349.             transform: scale(1.6);
  350.         }
  351.         @keyframes blink {
  352.             0%{
  353.                 box-shadow:0 0 0 0 #fff;
  354.             }
  355.             25% {
  356.                 box-shadow: 0 0 1px 1px #fff;
  357.             }
  358.             50% {
  359.                 box-shadow: 0 0 2px 2px #fff;
  360.             }
  361.             75% {
  362.                 box-shadow: 0 0 3px 3px #fff;
  363.             }
  364.             100% {
  365.                 box-shadow: 0 0 4px 4px #fff;
  366.             }
  367.         }
  368.     </style>
  369.     <head>
  370.         <meta charset="UTF-8">
  371.         <meta name="筱白爱学习" content="圣诞节快乐">
  372.         <title>筱白爱学习</title>
  373.         <link rel="stylesheet" href="index.css"/>
  374.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  375.     </head>
  376.     <body>
  377.         <p class="word">声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。