|
一、只使用 CSS 制作的动画圣诞树演示地址：http://haiyong.site/christmastree1（建议使用电脑打开，没做响应式手机端会有些变形，或者可以看看后面的圣诞树） 
HTML代码： 这里的HTML代码是完整无删减的 <div class="card-container"> <div class="snow-flakes-1"></div> <div class="snow-flakes-2"></div> <h2>接下来是雪花，圣诞树，新年和</h2> <h1>更好的我们</h1> <div class="tree-container"> <div class="ball-0"></div> <div class="tree-p1"> <ul> <li> <div class="xmas-ball ball-1"></div> <div class="tree-left-branch"></div> </li> <li><div class="tree-right-branch"></div></li> </ul> </div> <div class="tree-p2"> <ul> <li> <div class="xmas-ball ball-2"></div> <div class="tree-left-branch"></div> </li> <li> <div class="xmas-ball ball-3"></div> <div class="tree-right-branch"></div> </li> </ul> </div> <div class="tree-p3"> <ul> <li> <div class="xmas-ball ball-6"></div> <div class="tree-left-branch"></div> </li> <li> <div class="xmas-ball ball-5"></div> <div class="xmas-ball ball-4"></div> <div class="tree-right-branch"></div> </li> </ul> </div> <div class="tree-p4"> <ul> <li> <div class="xmas-ball ball-7"></div> <div class="xmas-ball ball-8"></div> <div class="tree-left-branch"></div> </li> <li> <div class="xmas-ball ball-9"></div> <div class="xmas-ball ball-10"></div> <div class="tree-right-branch stubborn"></div> </li> </ul> </div> <div class="wood"></div> <div class="presents"> <div class="present-container-1"> <div class="tie"></div> <div class="lid"></div> <div class="box"></div> </div> <div class="present-container-2"> <div class="tie"></div> <div class="lid"></div> <div class="box"></div> </div> </div> </div> <h3>圣诞节快乐!</h3> <p><span>from haiyong</span></p></div> CSS主要代码 CSS比较多，我截取了部分主要代码 body { height: 100vh; display: flex; justify-content: center; align-items: center; color: #000;}ul { list-style-type: none;}ul li { display: inline-block;}h1 { font-family: "Mountains of Christmas", cursive; font-size: 42px; line-height: 60px; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}h1::before, h1::after { content: "
下载地址:
vue之数据代理详解
vue3中vuex与pinia的踩坑笔记记录 |
