新增第197个小实例：彩带圣诞树

2022-12-19 17:30:39 +08:00 · 2022-12-19 17:30:39 +08:00 · cd3a6040b4
parent 42ab242868
commit cd3a6040b4
4 changed files with 134 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -204,6 +204,7 @@
 194. HTML5+CSS3+JS小实例：自适应瀑布流布局
 195. HTML5+CSS3小实例：纯CSS实现网站置灰
 196. HTML5+CSS3小实例：纯CSS实现锚点平滑过渡
+197. HTML5+CSS3+Vue小实例：彩带圣诞树

 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
--- a/code/197/197.css
+++ b/code/197/197.css
@ -0,0 +1,100 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口宽高 */
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #233343;
+    /* 溢出隐藏 */
+    overflow: hidden;
+    /* 开启3D */
+    transform-style: preserve-3d;
+    /* 设置视距 */
+    perspective: 1200px;
+}
+.tree{
+    width: 200px;
+    height: 300px;
+    /* 相对定位 */
+    position: relative;
+    /* 开启3D */
+    transform-style: preserve-3d;
+    /* 执行动画 */
+    animation: spin 2s linear infinite;
+}
+/* 彩色小点 */
+.tree-light{
+    transform-style: preserve-3d;
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    left: 50%;
+    /* 通过var函数调用前面设置好的自定义属性，设置彩色小点的位置、样式和动画 */
+    bottom: calc(var(--y) * 1%);
+    transform: translate(-50%,50%) rotateY(calc(var(--rotate, 0) * 1deg)) translate3d(0,0,calc(var(--radius, 0) * 8px));
+    /* 执行动画 */
+    animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite,
+               appear 0.5s calc(var(--appear) * 0.05s);
+}
+/* 星星 */
+.tree-star{
+    /* 定义线条 */
+    stroke: #f5e0a3;
+    /* 设置虚线：虚线长度 间距 */
+    stroke-dasharray: 1000 1000;
+    width: 32px;
+    height: 32px;
+    /* 星星发光效果 */
+    filter: drop-shadow(0 0 10px #fcf1cf);
+    /* 绝对定位 */
+    position: absolute;
+    left: 50%;
+    bottom: 100%;
+    transform: translate(-50%,0);
+    /* 执行动画 */
+    animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) backwards;
+}
+
+/* 定义动画 */
+/* 彩色小点出现 */
+@keyframes appear {
+    from{
+        opacity: 0;
+    }
+}
+/* 彩色小点变色 */
+@keyframes flash {
+    0%,100%{
+        background-color: #4f60f6;
+    }
+    20%{
+        background-color: #f64f4f;
+    }
+    40%{
+        background-color: #4fecf6;
+    }
+    60%{
+        background-color: #f6db4f;
+    }
+    80%{
+        background-color: #f64fe5;
+    }
+}
+/* 圣诞树旋转 */
+@keyframes spin {
+    to{
+        transform: rotateY(360deg);
+    }
+}
+/* 星星出现 */
+@keyframes stroke {
+    from{
+        stroke-dashoffset: -1000;
+    }
+}
--- a/code/197/197.html
+++ b/code/197/197.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<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="197.css">
+    <!-- 引入vue -->
+    <script src="/js/vue.min.js"></script>
+</head>
+<body>
+    <div class="tree">
+        <!-- --开头的属性是CSS的自定义属性，可通过var函数对其调用 -->
+        <div class="tree-light" v-for="(item,index) in 50" :style="{'--appear':index,'--y':2*index,'--rotate':1440-28.8*index,'--radius':12.5-0.25*index,'--speed':index*0.1,'--delay':index*0.05}"></div>
+        <!-- 星星 -->
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.32 108.44" class="tree-star" style="--delay:50;">
+            <path d="M90.19 104.33L57.12 87.38 24.4 105l5.91-36.69L3.44 42.65l36.72-5.72 16.1-33.5L73.06 36.6l36.83 4.97-26.35 26.21z" fill="none" stroke-width="6.88" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+    </div>
+</body>
+</html>
+
+<script>
+    // 这里是vue的语法
+    new Vue({
+        el:'.tree',
+        data:{}
+    })
+</script>
--- a/code/197/星星.svg
+++ b/code/197/星星.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.32 108.44">
+    <path d="M90.19 104.33L57.12 87.38 24.4 105l5.91-36.69L3.44 42.65l36.72-5.72 16.1-33.5L73.06 36.6l36.83 4.97-26.35 26.21z" fill="none" stroke-width="6.88" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>