Merry Christmas

原创 已于 2022-06-03 13:33:30 修改 · 642 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

于 2021-12-25 20:06:11 首次发布
本文介绍了一篇关于使用HTML和CSS创建动态圣诞树的教程，包括`letter-spacing`属性调整字符间距，`unset`属性重置样式，以及`animation`属性实现动画效果。文章详细展示了代码实现过程，包括星星、树叶、树干、彩球和闪烁效果的制作，适合前端开发者学习。

我的圣诞树写好啦~

文章目录

第一颗圣诞树

参考链接：https://www.bilibili.com/video/BV1PZ4y1X7sY

展示

在这里插入图片描述

代码

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣诞树</title>
    <link rel="stylesheet" href="../css/MerryChristmas.css">
</head>

<body>
    
    <p class="word">Merry Christmas</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 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>
                <span>◆</span>
                <span>◆</span>
            </div>
            <div class="blink">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>

</body>
</html>

CSS：

html, body{
    width: 100%;
    height: 100%;
}


*{
    margin: 0;
    padding: 0;
}


body{
    background-color: #000;
}


.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);
}


.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{
    position: absolute;
    left: -65px;
    top: -45px;
    content: '';
    border-right: 30px solid transparent;
    border-bottom: 80px solid gold;
    border-left: 30px solid transparent;
    transform: rotate(-35deg);
}


.star-in:after{
    position: absolute;
    left: -105px;
    top: -3px;
    content: '';
    border-right: 100px solid transparent;
    border-bottom: 70px solid gold;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
}


@keyframes starLight{
    0%{
        background: radial-gradient(ellipse at center,
        gold 0%,
        rgba(255, 240, 158, 0.5) 42%,
        rgba(255, 242, 173, 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(14, 110, 14);
    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-color: rgb(14, 110, 14);
    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-color: rgb(14, 110, 14);
    width: 25px;
    height: 30px;
    border-radius: 0 10px 35px 10px;
    transform: translateY(0) translateX(50%);
}


.leaf:nth-child(even){
    background-color: #0f880f;
}


.leaf:nth-child(even) .edge{
    background-color: #0f880f;
}


.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: 95;
    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-color: #f00;
    box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
    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-color: #ececec;
    box-shadow: -1px -1px 6px #615f5f, 1px 1px 8px #fff;
}


.b7, .b8, .b9{
    background: gold;
    box-shadow: -1px -1px 6px inset #3a3101, 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: 24%;
    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: 8%;
    top: 56%;
    font-size: 12px;
}


.sparkle span:nth-child(6){
    left: 70%;
    top: 36%;
    font-size: 14px;
}


.sparkle span:nth-child(7){
    left: 88%;
    top: 20%;
    font-size: 12px;
}


.blink div{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 101;
    position: absolute;
    animation: blink 1.5s ease infinite alternate;
}


@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;
    }
}


.blink div:nth-child(1){
    transform: scale(0.6);
}


.blink div:nth-child(2){
    left: 88%;
    top: 66%;
    transform: scale(1.2);
}


.blink div:nth-child(3){
    left: 54%;
    top: 43%;
    transform: scale(0.6);
}


.blink div:nth-child(4){
    left: 64%;
    top: 33%;
    transform: scale(0.6);
}


.blink div:nth-child(5){
    left: 34%;
    top: 63%;
    transform: scale(1.4);
}


.blink div:nth-child(6){
    left: 14%;
    top: 73%;
    transform: scale(0.8);
}

学习新知识

1. letter-spacing属性

在这里插入图片描述
letter-spacing属性是增加（值为正）或减少（值为负）字符间距。
即当应用在英文时，就是增加或减少每个字母之间的间距；应用在中文文字中时就是每个汉字之间的间距。

2. css3 unset属性

在这里插入图片描述
unset 关键字我们可以理解为不设置，其实，它是关键字initial和inherit的组合。

当我们给一个css属性设置了unset的话,可以分为两种情况：

  1. 如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，类似于inherit
  2. 如果没有继承父级样式，则将该属性重新设置为初始值，类似于initial。

一般left和right在一个样式中只能使用一次，同时使用会出现兼容问题，当浏览器解释代码的时候发现left和right同时存在时，就会放弃解释right。（放弃解释后优先级就派不上用场了，即使优先级最高的！important也不会作用。）
要想解决上述的优先级问题，这里用unset重置就可解决问题。

3. animation动画属性

在这里插入图片描述
在这里插入图片描述

动画就是使元素从一种样式逐渐变化为另一种样式的效果。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 from 和 to，等价于 0% 和 100%。

语法：

animation: name duration timing-function delay iteration-count direction;

在这里插入图片描述

Merry Christmas HTML
weixin_48591974的博客
12-25 685
简单分享 Merry Christmas HTML 设计的核心代码。
Merry Christmas~初学HTML的人给朋友编写的的网页
记录我学计算的过程及想法~
12-24 316
特殊的方法介绍圣诞节~我;请对圣诞节进行一个简介chatGPT：圣诞节是一个基督教传统节日，每年12月25日庆祝耶稣基督的诞生。圣诞节有许多传统的活动，包括放烟花，穿圣诞服装，放礼花，唱圣诞歌曲，交换礼物，和吃特殊的食物。圣诞节也是一个家庭聚会的时刻，家人们团聚一堂，共庆节日。chatGPT是真的不错啊。尽管说我们不过圣诞节，但是哪一个初中生能拒绝这样喜庆的气氛啊但是由于疫情原因，我们无法有大活动，于是我就在家里学习HTML，想做一个小网页。
Merry christmas！2020
keny-大成的博客
12-27 351
_ .-(_) / _/ .-' \ / '. ,-~--~-~-~-~-, {__.._...__....
Merry Christmas~
U20215153的博客
12-25 403
Sending you my heartfelt wishes for a Merry Christmas !
大学英语（第一册）复习（原文及全文翻译）——Unit 5 - A Miserable, Merry Christmas（又悲又喜的圣诞节）
预见未来to50的专栏
09-06 2947
Unit 5 - A Miserable, Merry Christmas A miserable and merry Christmas? How could it be? Christmas was coming. I wanted a pony. To make sure that my parents understood, I declared that I wanted nothing else. "Nothing but a pony?" my father asked. "Nothi
Merry Christmas Eve
momo的博客
07-23 423
#password1.pypwd = raw_input('what is the password?')if pwd =='apple': print('Merry Christmas Eve!')else: print("You're a idiot!")print('Haha!')
Merry Christmas圣诞节动态ppt贺卡模板.rar
09-07
标题中的“Merry Christmas圣诞节动态ppt贺卡模板.rar”表明这是一个专门为庆祝圣诞节设计的PowerPoint（PPT）模板，其中包含动态元素，如拉开的幕布、花藤、雪人、蓝天、星光以及从天而降的圣诞礼物，用于制作具有...
漂亮的圣诞树——Merry Christmas圣诞节ppt模板.zip
09-08
在本资源中，我们拥有的是一个名为“漂亮的圣诞树——Merry Christmas圣诞节ppt模板.zip”的压缩包文件。这个文件主要用于创建具有节日氛围的PPT演示文稿，特别适合在圣诞节期间使用。通过这个模板，用户可以快速...
Merry Christmas圣诞节祝福贺卡ppt模板（2套）.zip
09-08
标题中的“Merry Christmas圣诞节祝福贺卡ppt模板（2套）.zip”表明这是一个压缩文件，其中包含了专门设计用于庆祝圣诞节的PPT模板。这样的模板通常由专业设计师创建，旨在帮助用户快速制作出富有节日气氛的贺卡或...
Merry Christmas喜庆红圣诞节活动策划ppt模板.zip
09-08
"Merry Christmas喜庆红圣诞节活动策划ppt模板.zip"是一个压缩包文件，包含了用于制作圣诞节主题活动的PowerPoint演示文稿的所有元素。以下是关于这个模板及其相关知识点的详细说明： 1. **压缩包文件**：这是一种...
Merry Christmas!圣诞快乐PPT模板下载.rar
07-15
Merry Christmas!圣诞快乐PPT模板，第一PPT模板网提供免费下载； 本模板适合用于制作圣诞节介绍PPT、圣诞节相关幻灯片； PPT内容： 1.圣诞节的由来 圣诞节这个名称是“基督悒撒”的缩写。很长时间以来圣诞节的...
CSS 字体、文本、背景与圆角核心属性学习资料
最新发布
HANhylyxy的博客
12-23 586
CSS（层叠样式表）是用于描述网页的表现形式的标准语言，它允许开发者为网页元素设置字体、文本、颜色、背景等样式。通过对不同元素应用样式，可以大大改善网页的外观和用户体验。在网页开发过程中，常见的CSS属性包括字体属性、文本对齐、文本装饰、行高、背景属性和圆角矩形等。
Vue 3 的魔法：用 v-bind() 让 CSS 爱上 TypeScript 常量
ttod的博客
12-18 964
Vue 3 的魔法：用 v-bind() 让 CSS 爱上 TypeScript 常量
CSS容器查询：让组件学会“见机行事“的魔法
ttod的博客
12-18 695
CSS容器查询：让组件学会"见机行事"的魔法
50天50个小项目 (React19 + Tailwindcss V4) ✨ | StickyNavbar（粘性导航栏）
WOMENshiNIDE的博客
12-23 486
基于React19 + Tailwindcss V4创建的响应式粘性导航栏组件。该项目通过滚动监听，当页面滚动超过100px时，导航栏会自动切换为白色背景并添加阴影效果。组件包含动态样式切换、当前页签高亮显示、平滑过渡动画等功能，同时搭配了Hero区域和内容展示区。
Vue 3 CSS中的v-bind()完全指南：让样式真正响应式
码农捻旧的博客
12-18 746
Vue 3 CSS v-bind() 摘要 Vue 3.2+ 引入的v-bind()函数让CSS样式真正响应式，可直接在<style>中使用组件变量。相比传统类名切换或内联样式，它提供更简洁的语法和自动更新机制。 核心功能： 直接在CSS中引用响应式变量 支持字符串、数字、布尔值、数组、对象等多种数据类型 可与计算属性结合实现复杂逻辑 实现动态主题切换等高级场景 典型应用： 动态颜色/尺寸调整 条件样式渲染 主题系统开发 组件样式参数化 该特性显著简化了动态样式实现，提升了开发效率和代码可维护性
【超完整】Tailwind CSS 实战教程
No_Name_Cao_Ni_Mei的博客
12-22 481
Tailwind CSS 是一个实用优先的 CSS 框架，通过原子化类名直接在 HTML 中构建自定义设计。其核心工作流包括扫描 HTML 类名、生成对应 CSS 规则，并通过 PurgeCSS 优化生产代码。配置文件支持自定义主题、颜色、字体、间距和断点等，采用 JIT 编译机制实时生成样式，最终输出精简高效的 CSS 文件。Tailwind CSS 兼具开发效率与性能优势，是现代化 Web 开发的实用工具。
react中用css加载背景图的2种情况
大赚万万亿
12-22 164
因为源码中已写死了images,所以在调用时,无需重复写images,只需撰写余下路径。就算vite.config.js中设置了base,打包时会自动加上,无需操心。另外如果你的文件夹不是images,可以改成别的文件夹名。css文件中载入背景图,用@或./之类的都可以。resolve.alias已经设置过@路径。行内背景图片地址,在jsx中使用。useImages源码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

不知-_

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

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

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

打赏作者

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

抵扣说明：

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

余额充值