一、前言

2022年圣诞节到来啦，很高兴能和大家一起度过。最近上网冲浪的时候发现一颗Low poly风格的圣诞树，是H5+CSS写的，给大家分享一下。

二、效果展示

三、实现步骤

HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Merry Christmas!</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="tree.css">
</head><body><div class="container"><div class="tree"><div class="shadow ts-3d"></div><div class="trunk ts-3d"><div></div><div></div><div></div><div></div></div><div class="leaves-bottom ts-3d"><div></div><div></div><div></div><div></div><!-- <div class="font">GHW</div> --></div><div class="leaves-middle ts-3d"><div class="ts-3d"></div><div class="ts-3d"></div><div class="ts-3d"></div><div class="ts-3d"></div></div><div class="leaves-top ts-3d"><div class="ts-3d"></div><div class="ts-3d"></div><div class="ts-3d"></div><div class="ts-3d"></div></div><div class="star star-1 ts-3d"></div><div class="star star-2 ts-3d"></div><div class="star star-3 ts-3d"></div><div class="star star-4 ts-3d"></div><div class="star star-5 ts-3d"></div><div class="shine ts-3d"></div></div><div class="font">Merry Christmas</div><div class="snow-container"><div class="snow snow-1 snow-y-1"></div><div class="snow snow-2 snow-y-2"></div><div class="snow snow-3 snow-y-3"></div><div class="snow snow-4 snow-y-3"></div><div class="snow snow-5 snow-y-2"></div><div class="snow snow-6 snow-y-1"></div><div class="snow snow-7 snow-y-1"></div><div class="snow snow-8 snow-y-2"></div><div class="snow snow-9 snow-y-3"></div><div class="snow snow-10 snow-y-3"></div></div></div>
</body></html>

CSS

:root {/* --main-bg: #c2c2c2; */--trunk-bg-1: #5e2100;--trunk-bg-2: #783e00;--leaves-bottom-bg-1: #0f980f;--leaves-bottom-bg-2: #3fc83f;/* --leaves-bottom-bg-2: red; */--leaves-middle-bg-1: #1fa81f;--leaves-middle-bg-2: #4fd84f;--leaves-top-bg-1: #2fb82f;--leaves-top-bg-2: #5fe85f;--star-bg: #ffdd00;--shine-bg: #ffeb69;--snow-bg: #f2f2f2;--tree-width: 200px;--tree-height: 400px;--tree-rotate: -15deg;--trunk-width: 30px;--trunk-height: 400px;--trunk-angle: 4.3deg;--leaves-translate: 15px;--leaves-bottom-width: 100px;--leaves-bottom-height: 320px;--leaves-bottom-angle: 18.2deg;--leaves-middle-width: 80px;--leaves-middle-height: 220px;--leaves-middle-angle: 21.4deg;--leaves-top-width: 60px;--leaves-top-height: 140px;--leaves-top-angle: 25.5deg;--star-size: 20px;--main-bg: rgb(5, 38, 5);
}html,
body {width: 100%;height: 100%;padding: 0;margin: 0;
}.ts-3d {transform-style: preserve-3d;
}.container {background-color: var(--main-bg);width: 100%;min-height: 100%;overflow: hidden;display: flex;align-items: center;justify-content: center;
}.tree {width: var(--tree-width);height: var(--tree-height);position: relative;transform-style: preserve-3d;transform: rotateX(var(--tree-rotate));
}.trunk,
.leaves-bottom,
.leaves-middle,
.leaves-top {position: absolute;width: 100%;height: 100%;top: 0;left: 0;animation: 10s tree-rotate linear infinite;
}.trunk div {border-top: none;border-left: solid var(--trunk-width) transparent;border-right: solid var(--trunk-width) transparent;position: absolute;bottom: 0;left: calc(50% - var(--trunk-width));transform-origin: bottom;
}.trunk div:nth-child(1) {border-bottom: solid var(--trunk-height) var(--trunk-bg-1);transform: rotateX(var(--trunk-angle)) translateY(2px) translateZ(var(--trunk-width));
}.trunk div:nth-child(2) {border-bottom: solid var(--trunk-height) var(--trunk-bg-2);transform: rotateY(90deg) rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
}.trunk div:nth-child(3) {border-bottom: solid var(--trunk-height) var(--trunk-bg-1);transform: rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
}.trunk div:nth-child(4) {border-bottom: solid var(--trunk-height) var(--trunk-bg-2);transform: rotateY(-90deg) rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
}.leaves-bottom div {border-top: none;border-left: solid var(--leaves-bottom-width) transparent;border-right: solid var(--leaves-bottom-width) transparent;position: absolute;top: var(--star-size);left: calc(50% - var(--leaves-bottom-width));transform-origin: bottom;
}.leaves-bottom div:nth-child(1) {border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-1);transform: rotateX(var(--leaves-bottom-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-bottom-width));
}.leaves-bottom div:nth-child(2) {border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-2);transform: rotateY(90deg) rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
}.leaves-bottom div:nth-child(3) {border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-1);transform: rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
}.leaves-bottom div:nth-child(4) {border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-2);transform: rotateY(-90deg) rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
}.leaves-middle div {border-top: none;border-left: solid var(--leaves-middle-width) transparent;border-right: solid var(--leaves-middle-width) transparent;position: absolute;top: var(--star-size);left: calc(50% - var(--leaves-middle-width));transform-origin: bottom;
}.leaves-middle div:nth-child(1) {border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-1);transform: rotateX(var(--leaves-middle-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-middle-width));
}.leaves-middle div:nth-child(2) {border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-2);transform: rotateY(90deg) rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
}.leaves-middle div:nth-child(3) {border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-1);transform: rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
}.leaves-middle div:nth-child(4) {border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-2);transform: rotateY(-90deg) rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
}.leaves-top div {border-top: none;border-left: solid var(--leaves-top-width) transparent;border-right: solid var(--leaves-top-width) transparent;position: absolute;top: var(--star-size);left: calc(50% - var(--leaves-top-width));transform-origin: bottom;
}.leaves-top div:nth-child(1) {border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-1);transform: rotateX(var(--leaves-top-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-top-width));
}.leaves-top div:nth-child(2) {border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-2);transform: rotateY(90deg) rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
}.leaves-top div:nth-child(3) {border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-1);transform: rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
}.leaves-top div:nth-child(4) {border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-2);transform: rotateY(-90deg) rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
}@keyframes tree-rotate {0% {transform: rotateX(0deg) rotateY(0deg);}99.99999% {transform: rotateX(0deg) rotateY(359deg);}
}.shadow {background-color: rgba(0, 0, 0, 0.8);width: calc(var(--leaves-bottom-width) * 2);height: calc(var(--leaves-bottom-width) * 2);filter: blur(calc(var(--leaves-bottom-width) / 2));position: absolute;bottom: calc(var(--leaves-bottom-width) * -1);left: calc(50% - var(--leaves-bottom-width));transform: rotateX(90deg) translateX(-50%);animation: 10s shadow-rotate linear infinite;
}@keyframes shadow-rotate {0% {transform: rotateX(-90deg) rotateZ(0deg);}99.99999% {transform: rotateX(-90deg) rotateZ(359deg);}
}.star-1 {transform: translateZ(-2px);animation: 10s star-1-rotate linear infinite;
}@keyframes star-1-rotate {0% {transform: rotateX(0deg) rotateY(0deg) translateZ(-2px);}99.99999% {transform: rotateX(0deg) rotateY(359deg) translateZ(-2px);}
}.star-2 {transform: translateZ(-1px);animation: 10s star-2-rotate linear infinite;
}@keyframes star-2-rotate {0% {transform: rotateX(0deg) rotateY(0deg) translateZ(-1px);}99.99999% {transform: rotateX(0deg) rotateY(359deg) translateZ(-1px);}
}.star-3 {transform: translateZ(0px);animation: 10s star-3-rotate linear infinite;
}@keyframes star-3-rotate {0% {transform: rotateX(0deg) rotateY(0deg) translateZ(0px);}99.99999% {transform: rotateX(0deg) rotateY(359deg) translateZ(0px);}
}.star-4 {transform: translateZ(1px);animation: 10s star-4-rotate linear infinite;
}@keyframes star-4-rotate {0% {transform: rotateX(0deg) rotateY(0deg) translateZ(1px);}99.99999% {transform: rotateX(0deg) rotateY(359deg) translateZ(1px);}
}.star-5 {transform: translateZ(2px);animation: 10s star-5-rotate linear infinite;
}@keyframes star-5-rotate {0% {transform: rotateX(0deg) rotateY(0deg) translateZ(2px);}99.99999% {transform: rotateX(0deg) rotateY(359deg) translateZ(2px);}
}.star,
.star:before,
.star:after {content: '';height: 0;width: 0;border-top: solid 30px var(--star-bg);border-left: solid 45px transparent;border-right: solid 45px transparent;position: absolute;top: 0;left: calc(50% - 45px);
}.star:before {transform: rotate(72deg);top: -33px;left: -46px;
}.star:after {transform: rotate(287deg);top: -33px;left: -44px;
}.shine {background: var(--shine-bg);height: 90px;width: 90px;position: absolute;top: -45px;left: calc(50% - 45px);border-radius: 50%;transform: translateZ(40px);filter: blur(20px);opacity: 0.6;animation: 5s shine linear infinite;
}@keyframes shine {0% {transform: scale(1) translateZ(40px);}50% {transform: scale(1.5) translateZ(40px);}100% {transform: scale(1) translateZ(40px);}
}.snow-container {width: 100%;height: 100%;position: absolute;
}.snow {position: absolute;
}.snow:before {content: '';background-color: var(--snow-bg);width: 100%;height: 100%;position: absolute;border-radius: 50%;
}.snow-y-1:before {animation: 8s snow-y-1 ease-in infinite, 8s snow-y-0 linear infinite;
}.snow-y-2:before {animation: 6s snow-y-2 ease-in infinite, 6s snow-y-0 linear infinite;
}.snow-y-3:before {animation: 4s snow-y-2 ease-in infinite, 4s snow-y-0 linear infinite;
}.snow-1 {width: 20px;height: 20px;top: calc(50% - 250px);left: calc(50% - 10px);animation: 1s snow-x linear infinite;
}.snow-2 {width: 15px;height: 15px;top: calc(50% - 300px);left: calc(50% - 30px);animation: 0.8s snow-x linear infinite 0.1s;
}.snow-3 {width: 10px;height: 10px;top: calc(50% - 400px);left: calc(50% + 60px);animation: 0.6s snow-x linear infinite 0.8s;
}.snow-4 {width: 25px;height: 25px;top: calc(50% - 200px);left: calc(50% + 50px);animation: 0.5s snow-x linear infinite 0.5s;
}.snow-5 {width: 18px;height: 18px;top: calc(50% - 200px);left: calc(50% - 50px);animation: 0.5s snow-x linear infinite 0.5s;
}.snow-6 {width: 12px;height: 12px;top: calc(50% - 150px);left: calc(50% - 120px);animation: 0.8s snow-x linear infinite 0.5s;
}.snow-7 {width: 20px;height: 20px;top: calc(50% - 150px);left: calc(50% + 75px);animation: 1s snow-x linear infinite 0.6s;
}.snow-8 {width: 22px;height: 22px;top: calc(50% - 10px);left: calc(50% - 30px);animation: 1s snow-x linear infinite 0.8s;
}.snow-9 {width: 8px;height: 8px;top: calc(50% - 250px);left: calc(50% - 30px);animation: 1s snow-x linear infinite 0.8s;
}.snow-10 {width: 13px;height: 13px;top: calc(50% - 250px);left: calc(50% - 100px);animation: 1s snow-x linear infinite 0.8s;
}@keyframes snow-x {0% {transform: translateX(0px);}25% {transform: translateX(5px);}50% {transform: translateX(0px);}75% {transform: translateX(-5px);}100% {transform: translateX(0px);}
}@keyframes snow-y-0 {0% {opacity: 1;}60% {opacity: 1;}100% {opacity: 0;}
}@keyframes snow-y-1 {0% {transform: translateY(0px);}99.99999% {transform: translateY(300px);}100% {transform: translateY(0px);}
}@keyframes snow-y-2 {0% {transform: translateY(0px);}99.99999% {transform: translateY(400px);}100% {transform: translateY(0px);}
}@keyframes snow-y-3 {0% {transform: translateY(0px);}99.99999% {transform: translateY(500px);}100% {transform: translateY(0px);}
}@font-face {font-family: 'font1';src: url('../font/Rom_ftl_lcd.ttf');
}@font-face {font-family: 'font2';src: url('../font/LOTSOFDOTZ.TTF');
}.font {position: absolute;text-align: center;font-family: "font2";bottom: 0;/* left: 40%; */letter-spacing: 0.5rem;line-height: 2rem;width: 15rem;height: 5rem;/* border: 1px solid; */color: #f2f2f2;
}

H5+CSS Low poly风格动效圣诞树分享相关推荐

  1. button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮

    按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 转载链接: https://github.com/XboxYan/note ...

  2. 美术干货：用Blender绘制low poly风格的游戏角色

    "low poly"(低面建模)因其独特的美术风格和相对不错的性价比成为一些游戏的首选,不过作为一种普及范围不算很广的建模手法,其具体的操作流程可能还不为人熟知. 笔者找到了一份用 ...

  3. 怎么实现hover_web前端CSS实现一个粒子动效的按钮

    按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 通常这类效果第一反应可能就是借助canvas了,比如下面这个案例点击预览( ...

  4. Unity Asset Store精品Low Poly风格素材资源合集

    本文介绍Unity Asset Store里优质的Low Poly风格素材,会从人物.环境.动物和通用四个方面的素材分别进行介绍. 一:人物素材 本部分包含幻想类.城市类和Q版人物素材三个子类别. O ...

  5. css实现红包雨动效

    提示:该实现方法灵敏度似乎不高 并且如果一直不点击红包,或者触发点击过慢,会出现屏幕上红包过多的问题(就是说不能让屏幕上的红包一直保持在一个均匀的量),另外一个缺点就是红包会重叠 css实现红包雨动效 ...

  6. [Toy]自动生成Low Poly风格图像 —— 基于Edge Drawing和Delaunay

    大概是暑假期间,和学弟讨论了一下这个问题,当时只草草分析了一下问题的解决思路,但是自己一直没有功夫动手实现.刚好国庆期间浪完返校,就想写个程序收收心.于是就把这个Low Poly做了一下. 还是惯例先 ...

  7. css 关闭按钮实现,CSS做的关闭按钮动效

    CSS 语言: CSSSCSS 确定 * { padding: 0; margin: 0; box-sizing: border-box; } body { background: #141926; ...

  8. 打造极简风格动效 —— 5 分钟轻松实现惊艳、震撼人心的视觉效果

    前期回顾 是不是在为 API 烦恼 ?好用免费的api接口大全呼之欲出_免流接口api_彩色之外的博客-CSDN博客APi.常用框架.UI.文档-- 整理合并https://blog.csdn.net ...

  9. php 画low poly,五分钟教你明白高大上LOW-POLY风格图片生成术

    有没有看到看到效果高大上的图片,觉得离自己很远,望而生畏?今天给大家介绍一种名为LOW-POLY的风格图片,让所有人都一起来LOW-POLY一把,高大上一把! 感谢新浪微博朋友@创意农民 授权分享.本 ...

  10. CSS 实现按钮点击动效的套路

    大厂技术  高级前端  Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 在 Web 中,大部分按钮可能都是平平无奇的,有时候为了强调品牌特殊或者满足特殊功能,可能需 ...

最新文章

  1. Github上十大热门可视化面板！再也不用担心画图啦！
  2. 关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现
  3. 提高代码改造过程的小想法
  4. C++中的string 类型占几个字节
  5. MySQL优化union查询
  6. Bugly符号化iOS 崩溃，快速定位crash(上传符号表)
  7. android文件管理器项目,浅析Android文件管理器(项目一)
  8. 谷歌推出关于滥用研究资助的新型试验计划
  9. c语言程序设计自考真题,自学考试《C语言程序设计》随堂试题及答案
  10. Visual Basic6.0下载及安装
  11. 使用MySql的yearweek()函数和通过java的Calendar获取的时间是当前年份第几周的数值不一致的问题
  12. 【USB电压电流表】基于STM32F103C8T6 for Arduino
  13. Pytorch测试模型的GFLOPs和Param大小
  14. 锁定计算机和睡眠有什么区别,电脑休眠和睡眠哪个好？电脑计算机睡眠和休眠有什么区别...
  15. 基于SpringBoot+Vue开发的一个知识社区分享平台
  16. win10计算机怎么拨号上网,win10系统怎么设置拨号上网 设置拨号上网的方法
  17. 腾讯地图路线规划 vue
  18. Java池化技术你了解多少？
  19. Web前端：HTML~CSS~JS
  20. python函数关键字参数传递_Python给函数传递不定关键字的参数

热门文章

  1. 机器学习训练营(四)：K近邻(k-nearest neighbors)算法
  2. 华为MA5300配置RADIUS认证
  3. Java并发编程学习篇3_读写锁ReadWriteLock、阻塞队列BlockingQueue、同步队列SynchronousQueue、线程池（三大方法、七大参数、四种拒绝策略、原生方式创建线程池）
  4. OpenDDS制作编译idl文件之一
  5. 学计算机的买HP合适吗,大学生买笔记本电脑，这样选就对了。
  6. 给对象添加一个新对象
  7. 软件工程网络15结对编程作业1（201521123018谢元将）
  8. 脉冲经过高通和低通滤波器后的波形
  9. Factory method 'dataSource' threw exception; nested exception is java.lang.NullPointerException
  10. android获取安卓版本,怎么获取android系统当前版本