css圣诞树 立体模型
2024-05-09 23:49:22
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>圣诞树</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>:root {--main-bg: #c2c2c2;--trunk-bg-1: #5e2100;--trunk-bg-2: #783e00;--leaves-bottom-bg-1: #0f980f;--leaves-bottom-bg-2: #3fc83f;--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;}html, body {width: 100%;height: 100%;padding: 0;margin: 0;overflow:hidden;}.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); }}
</style>
</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><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="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圣诞树 立体模型相关推荐
- html盒子模型页面居中,【静态页面架构】CSS之盒子模型
CSS架构 盒子模型: 以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距: border属性: 简写属性用来设置边距的上(top ...
- css flex布局 模型（CSS justify-content 属性） - 代码案例
css flex布局 模型(CSS justify-content 属性) - 代码案例 效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
- 详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
- css模型安装,【CSS】CSS-框模型+定位+实训练习
<[CSS]CSS-框模型+定位+实训练习>由会员分享,可在线阅读,更多相关<[CSS]CSS-框模型+定位+实训练习(9页珍藏版)>请在人人文库网上搜索. 1.第二阶段-We ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- Chem 3D中怎么创建立体模型
ChemDraw作为一款很受大家欢迎的化学绘图软件,其在绘制平面化学方面的功能已经非常的强大了,其实它也可以绘制3D图形.Chem 3D就是绘制3D图形的重要组件.而且为了满足不同的用户绘图的需求,可 ...
- Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言 持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍 盒子的概念 页面中的每一个标签,都可看做是一个 "盒子&qu ...
- html+css简单立体导航栏
html+css简单立体导航栏 一.简单立体导航栏效果 二.代码实现 1.html 2.css 一.简单立体导航栏效果 二.代码实现 1.html 代码如下(示例): <!DOCTYPE htm ...
- 3D园区可视化建模三维智慧建筑立体模型在线展示
智慧园区是指综合新一代3D建模与三维可视化技术,具备迅捷的信息采集,告诉的信息传输.高度集中的计算.智能实物处理和无所不在的服务提供能力.商迪3D运用3D建模.3d可视化.三维立体模型.三维虚拟现实. ...
最新文章
- \\s+ split替换
- 德国KubeCon直击：如何轻松且安心地将k8s用于生产？
- Jan 12 - Delete Node in a Linked List; Data Structure; Linked List; Pointer;
- 滚动字幕Marquee
- Android应用开发—PendingIntent:如何判断两个PendingIntent对等
- JeecgBoot 3.1.0 版本发布，基于代码生成器的企业级低代码平台
- HTC ThunderBolt无法打开3G问题解决方法
- 年轻人找不到自己喜欢的工作，怎么办？
- c语言,成绩输出直方图,编写一个程序，打印输入中单词长度的直方图
- ELK 日志管理系统，初次尝试记录
- ES6变量的解构赋值注意点及用途(补充)
- 图像数据增强扩充数据库_分析数据扩充以进行图像分类
- 教你手工去迅雷广告『罗斌原创』
- React跨域解决方案
- java版b2b2c社交电商spring cloud分布式微服务 （三） 服务消费者（Feign）
- 20155304《网络对抗》信息搜集与漏洞扫描
- n元一次不定方程 模板
- 【前端】跨域 问题 原理 + 解决方案 下
- 计算机领域的世界之最,超级计算机神威·太湖之光世界最快(中国这五年的世界之最④)...
- 开源 免费 java CMS - FreeCMS2.8 会员头像设置