HTML2022年圣诞节专属你的圣诞树来了

最新推荐文章于 2022-12-31 22:38:06 发布
最新推荐文章于 2022-12-31 22:38:06 发布
阅读量335 收藏
点赞数 1
分类专栏： 爱学习→其他 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43552143/article/details/128328673
版权

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

<doctype html>
<html lang="en">
    <style>
        html,body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #8686a0;
        }

        .word {
            font-size: 22px;
            text-align: center;
            color: gold;
            padding-top: 50px;
            letter-spacing: 5px;
            text-shadow: 2px 4px 9px rgba(255,255,255,0.7);
        }

        .word1 {
            font-size: 13px;
            text-align: center;
            color: rgb(235, 17, 206);
            padding-top: 50px;
            letter-spacing: 5px;
            text-shadow: 2px 4px 9px rgba(255,255,255,0.7);
        }

        .word2 {
            font-size: 16px;
            text-align: center;
            color: rgb(241, 14, 204);
            padding-bottom: 50px;
            letter-spacing: 5px;
            text-shadow: 2px 4px 9px rgba(255,255,255,0.7);
        }

        /*圣诞树外层div*/
        .tree {
            width: 200px;
            height: 300px;
            margin: 80px auto 0 auto;
            position: relative;
            /*相对定位*/
        /*     border: 1px solid #fff; */
        }

        .star {
            width: 50px;
            height: 50px;
            position:absolute;
            background-color:#fff;
            border-radius:50%;
            top:-25px;
            z-index:1000;
            left:50%;
            transform:translateX(-50%);
            animation:starLight 1.5s ease infinite alternate;
        }
        .star-in{
            position:absolute;
            left:50%;
            top:50%;
            border-right:100px solid transparent;
            border-bottom:70px solid gold;
            border-left:100px solid transparent;
            transform:translateX(-50%) translateY(-50%) rotate(35deg) 
            scale(0.14);
        }
        .star-in:before{
            border-bottom: 80px solid gold;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position:absolute;
            top:-45px;
            left:-65px;
            content:'';
            transform:rotate(-35deg);
        }
        .star-in:after{
            border-bottom: 70px solid gold;
            border-left: 100px  solid transparent;
            border-right: 100px  solid transparent;
            position:absolute;
            top:3px;
            left:-105px;
            content:'';
            transform:rotate(-70deg);
        }
        @keyframes starLight{
            0% {
                background: radial-gradient(ellipse at center, 
                gold 0%, rgba(255, 240, 158, 0.5) 42%,
                rgba(129, 125, 102, 0.2) 58%,
                rgba(255, 255, 255, 0.1) 100%);
            }
            25% {
                background: radial-gradient(ellipse at center, gold 0%,
                rgba(255, 240, 158, 0.5) 40%,
                rgba(255, 242, 173, 0.2) 60%, 
                rgba(255, 255, 255, 0.1) 100%);
            }
            50% {
                background: radial-gradient(ellipse at center,
                gold 0%, rgba(255, 240, 158, 0.5) 38%, 
                rgba(255, 242, 173, 0.2) 62%,
                rgba(255, 255, 255, 0.1) 100%);
            }
            75% {
                background: radial-gradient(ellipse at center,
                gold 0%, rgba(255, 240, 158, 0.5) 36%,
                rgba(255, 242, 173, 0.2) 64%, 
                rgba(255, 255, 255, 0.1) 100%);
            }
            100% {
                background: radial-gradient(ellipse at center,
                gold 0%, rgba(255, 240, 158, 0.5) 34%,
                rgba(255, 242, 173, 0.2) 66%,
                rgba(255, 255, 255, 0.1) 100%);
            }
        }
        .leaf{
            position:absolute;
            left:50%;
            top:3%;
            margin-left:-30px;
            background-color:rgb(24, 143, 24);
            width:60px;
            height:60px;
            border-radius:0 10px 35px 10px ;
            transform:rotate(45deg);
            box-shadow:2px 7px 2px rgba(43,43,43,0.2);
        }
        .edge{
            position:absolute;
            left:0;
            bottom:0;
            background:rgb(24, 143, 24);
            width:25px;
            height:30px;
            border-radius:0 10px 35px 10px;
            transform:translateY(50%) translateX(0);
        }
        .edge.right{
            position:absolute;
            left: unset;
            bottom: unset;
            top: 0;
            right: 0;
            background:rgb(24, 143, 24);
            width:25px;
            height:30px;
            border-radius:0 10px 35px 10px;
            transform:translateY(0) translateX(50%);
        }
        /*双数修改背景色*/
        .leaf:nth-child(even){
            background-color: #42cf42;
        }
        .leaf:nth-child(even) .edge{
            background-color: #42cf42;
        }
        /*最上面*/
        .leaf:nth-child(1){
            z-index:100;
            transform: rotate(45deg) scale(0.8) ;
        }
        /*第二*/
        .leaf:nth-child(2) {
            z-index: 99;
            top: 15%;
            transform: rotate(45deg) scale(1.3) ;
        }
        .leaf:nth-child(3) {
            z-index: 98;
            top: 28%;
            transform: rotate(45deg) scale(1.6) ;
        }
        .leaf:nth-child(4) {
            z-index: 97;
            top: 41%;
            transform: rotate(45deg) scale(1.9) ;
        }
        .leaf:nth-child(5) {
            z-index: 96;
            top: 54%;
            transform: rotate(45deg) scale(2.2) ;
        }
        .trunk{
            width:25px;
            height:45px;
            border-radius:0 0 3px 3px;
            position:absolute;
            left:50%;
            transform:translateX(-50%);
            bottom:20px;
            z-index:1;
            box-shadow:0 0 10px 5px rgb(19,19,19);
            background:linear-gradient(0deg,#6d411b 0%,#5a341d 64%);
        }
        .ball{
            width:20px;
            height:20px;
            background:#f00;
            box-shadow:-1px -1px 6px inset rgb(167, 3, 3),1px 1px 8px inset #f8d9d9;
            border-radius:50%;
            z-index:101;
            position:absolute;
        }
        .b1{
            left: 25%;
            top: 30%;
        }
        .b2 {
            left: 35%;
            top: 50%;
        }
        .b3 {
            left: 65%;
            top: 20%;
        }
        .b4 {
            left: 45%;
            top: 22%;
        }
        .b5 {
            left: 40%;
            top: 72%;
        }
        .b6 {
            left: 60%;
            top: 52%;
        }
        .b7 {
            left: 50%;
            top: 62%;
        }
        .b8 {
            left: 80%;
            top: 42%;
        }
        .b9 {
            left: 10%;
            top: 62%;
        }
        .b4,.b5,.b6{
            background:#ececec;
            box-shadow:-1px -1px 6px inset #c9c5c5,1px 1px 8px inset #fff;
        }
        .b7,.b8,.b9{
            background:gold;
            box-shadow: -1px -1px 6px inset #aa9208, 1px 1px 8px inset #fff;
        }
        .sparkle span{
            display:block;
            position:absolute;
            font-size:20px;
            z-index:101;
            color:#fff;
            animation:lights 1.5s ease infinite alternate;
        }
        /*闪烁动画*/
        @keyframes lights{
            0%,100%{
                transform:scale(1);
            }
            50%{
                transform:scale(1.5);
            }
        }
        .sparkle span:nth-child(1) {
            left: 30%;
            top: 40%;
        }
        .sparkle span:nth-child(2) {
            left: 40%;
            top: 27%;
            font-size: 15px;
        }
        .sparkle span:nth-child(3) {
            left: 50%;
            top: 57%;
            font-size: 12px;
        }
        .sparkle span:nth-child(4) {
            left: 70%;
            top: 67%;
            font-size: 14px;
        }
        .sparkle span:nth-child(5) {
            left: 74%;
            top: 13%;
            font-size: 16px;
        }
        .blink div{
        width:4px;
        height:4px;
        background:#fff;
        z-index:101;
        position:absolute;
        border-radius:50%;
        animation:blink 1.5s ease infinite alternate;    
        }
        .blink div:nth-child(2) {
            left: 34%;
            top: 13%;
            transform: scale(1.2);
        }
        .blink div:nth-child(3) {
            left: 54%;
            top: 43%;
            transform: scale(0.7);
        }
        .blink div:nth-child(4) {
            left: 64%;
            top: 33%;
            transform: scale(1.4);
        }
        .blink div:nth-child(5) {
            left: 34%;
            top: 63%;
            transform: scale(1.8);
        }
        .blink div:nth-child(6) {
            left: 14%;
            top: 76%;
            transform: scale(1.6);
        }
        .blink div:nth-child(7) {
            left: 64%;
            top: 79%;
            transform: scale(1.6);
        }
        .blink div:nth-child(8) {
            left: 80%;
            top: 50%;
            transform: scale(1.6);
        }
        .blink div:nth-child(9) {
            left: 83%;
            top: 20%;
            transform: scale(1.6);
        }
        @keyframes blink {
            0%{
                box-shadow:0 0 0 0 #fff;
            }
            25% {
                box-shadow: 0 0 1px 1px #fff;
            }
            50% {
                box-shadow: 0 0 2px 2px #fff;
            }
            75% {
                box-shadow: 0 0 3px 3px #fff;
            }
            100% {
                box-shadow: 0 0 4px 4px #fff;
            }
        }
    </style>
    <head>
        <meta charset="UTF-8">
        <meta name="筱白爱学习" content="圣诞节快乐">
        <title>筱白爱学习</title>
        <link rel="stylesheet" href="index.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    </head>
    <body>
        <p class="word">🎄Merry Christmas🎄</p>
        <p class="word1">专属筱白的圣诞树</p>
        <div class="tree">
            <div class="star">
                <div class="star-in"></div>
            </div>
            <!--树叶-->
            <div class="leaf-box">
                <div class="leaf">
                    <div class="edge"></div>
                    <div class="edge right">🧸</div>
                </div>
                <div class="leaf">
                    <div class="edge"></div>
                    <div class="edge right"></div>
                </div>
                <div class="leaf">
                    <div class="edge">🎅</div>
                    <div class="edge right"></div>
                </div>
                <div class="leaf">
                    <div class="edge"></div>
                    <div class="edge right"></div>
                </div>
                <div class="leaf">
                    <div class="edge"></div>
                    <div class="edge right"></div>
                </div>
            </div>
            <!--树干-->
            <div class="trunk"></div>
            <!--彩色的球-->
            <div class="ball-box">
                <div class="ball b1"></div>
                <div class="ball b2"></div>
                <div class="ball b3"></div>
                <div class="ball b4"></div>
                <div class="ball b5"></div>
                <div class="ball b6"></div>
                <div class="ball b7"></div>
                <div class="ball b8"></div>
                <div class="ball b9"></div>
            </div>
            <!--闪烁--->
            <div class="sparkle">
                <span>✦</span>
                <span>✦</span>
                <span>✦</span>
                <span>✦</span>
                <span>✦</span>
                <span>✦</span>
            </div>
            <div class="blink">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </body>
</html>

拿走不谢！！！

筱白爱学习
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
超火的圣诞树代码html源码分享
02-24
超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣诞树代码html源码分享超火的圣
程序员的浪漫------下雪氛围圣诞树源码
weixin_64050318的博客
01-19 6万+
氛围圣诞树，雪花和圣诞树灯光会随音乐节奏闪动，音乐可自主选择，什么歌曲都可以
圣诞节制作一颗HTML的圣诞树吧
快乐学习
12-31 1万+
来到圣诞节了，那么就可以制作一颗HTML的圣诞树送给朋友，没有编程基础的小白也可以按照步骤操作也可以运行起来代码的。运行这里启动调试，选择任意的浏览器运行（我有chrome就选择谷歌chrome运行了）选择快捷键Ctrl+S保存（前面的名字可以随便改，但是后缀的html不要改）保存类型就选择所有文件就好，或者有html类型的就选择html类型就好了。复制进去后点击文件----另存为。双击打开就可以查看运行效果了。然后把如下的代码复制到里面去。这样就是保存完成后的效果图了。二、记事本txt保存运行。
HTML制作圣诞树，小白都会使用的教程。
qq_62994974的博客
12-24 1万+
小白都会使用的圣诞树代码。
HTML实现的“圣诞树”
weixin_63984309的博客
12-12 6577
HTML实现的“圣诞树”
献给2022年的圣诞节的圣诞树（源码）
12-28
内容概况：当你打开看到圣诞...使用目标：当您鼠标放在上面试图去获取星星的时候，星星会自动跳到您的身边，并且圣诞树还会将祝福赐予您，代表着祝福，这棵圣诞树将会告诉您【2022年~2023年】 的您，Merry Christmas。
2022圣诞节html圣诞树飘雪效果
12-02
2022圣诞节html圣诞树飘雪效果，HTML+CSS+JS，带雪花素材图适合圣诞节主题使用，无加密，方便二次编写使用
程序员浪漫-圣诞树（html）
12-20
据说圣诞树 [2] 最早出现在古罗马12月中旬的农神节，德国传教士尼古斯在公元8世纪用枞树供奉圣婴。随后，德国人把12月24日作为亚当和夏娃的节日，在家放上象征伊甸园的“乐园树”，上挂代表圣饼的小甜饼，象征赎罪；...
2022年简约圣诞狂欢圣诞节海报.zip PSD格式
12-11
2022年简约圣诞狂欢圣诞节海报.zip PSD格式
圣诞 HTML 代码汇总
一些笔记
12-22 9746
圣诞庆祝祝福 HTML 代码
html实现圣诞树动效.zip
12-24
html实现圣诞树动效
用代码画一个圣诞树
qq_60976312的博客
12-24 972
用代码画一个圣诞树
HTML圣诞树代码(动态音效)
林在闪闪发光的博客
12-09 3259
正在下载音乐，请稍等...';'请稍等...或者请选择音乐圣诞树
使用HTML实现一个不一样的圣诞树
威威的博客
12-24 2444
好看的圣诞树
200行Html5+CSS3+JS代码实现动态圣诞树
热门推荐
知心宝贝的博客
12-20 7万+
一、前言 最近CSDN的热榜出现了很多用Python、C/C++等编程语言实现的圣诞树，这篇文章用前端三大杀手Html5、CSS、Js来实现动态圣诞树 二、
HTML写圣诞树
qq_48128672的博客
12-24 286
HTML代码写动态圣诞树
HTML圣诞树
LIRAN159的博客
12-15 2104
HTML圣诞树
HTML实现圣诞树
m0_55984501的博客
12-07 3527
* { box-sizing: border-box; } body { margin: 0; height: 100vh;
HTML 画一颗圣诞树
weixin_35756690的博客
12-23 480
可以用 HTML 画一颗圣诞树的方法是： 使用 HTML 的 div 元素来表示圣诞树的主体。 使用 HTML 的 span 元素来表示圣诞树的枝干和叶子。 使用 CSS 的背景颜色和边框属性来给圣诞树的枝干和叶子上色。 使用 CSS 的 transform 属性来调整圣诞树的大小和形状。 下面是一个示例： <style> .tree { background-...
html圣诞节代码_专属程序员的浪漫圣诞节
最新发布
12-21
HTML圣诞节代码_专属程序员的浪漫圣诞节 在这个浪漫的圣诞节，作为一名程序员，我们可以通过编写专属的HTML圣诞节代码来展现我们的浪漫和创意。首先，我们可以创建一个圣诞节主题的网页，使用HTML和CSS来设计一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

筱白爱学习

你的鼓励将是我写作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值