圣诞树-前端代码html--动态

先看效果图：

分为两部分

结构：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>圣诞树</title></head>
<body><div class="box-canvas"><div class="trunk"></div><div class="tree"></div><div class="star"></div><div class="lights-group bottom"><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div></div><div class="lights-group top"><div class="light"></div><div class="light"></div><div class="light"></div><div class="light"></div></div>
</div></body>
</html>

样式：

:root {--background-color: #101B2A;--tree-color: #1B885E;--yellow: #FFFC5E;
}body{background: var(--background-color);
}.box-canvas{position: relative;margin: auto;display: block;margin-top: 10vmin;margin-bottom: 10vmin;width: 80vmin;height: 80vmin;
}/* Bottom tree piece */
.tree {position: absolute;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);bottom: 20vmin;width: 0;height: 0;border-bottom: 32vmin solid var(--tree-color);border-right: 32vmin solid transparent;border-left: 32vmin solid transparent;
}/* Tree middle */
.tree::before {content: '';position: absolute;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);bottom: -16vmin;width: 0;height: 0;border-bottom: 27vmin solid var(--tree-color);border-right: 27vmin solid transparent;border-left: 27vmin solid transparent;
}/* Tree top */
.tree::after {content: '';position: absolute;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);bottom: 0vmin;width: 0;height: 0;border-bottom: 19vmin solid var(--tree-color);border-right: 19vmin solid transparent;border-left: 19vmin solid transparent;
}/* Snow back of trunk */
.trunk {position: absolute;bottom: 0;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);background-color: white;width: 50vmin;height: 10vmin;border-radius: 58% 42% 83% 17% / 44% 39% 61% 56%;
}/* Trunk */
.trunk::before {content: '';position: absolute;-webkit-transform: translateX(-50%);transform: translateX(-50%);background-color: #CC7C06;bottom: 0;width: 10vmin;height: 20vmin;left: 50%;
}/* Snow front of trunk */
.trunk::after {content: '';position: absolute;background-color: white;bottom: -5vmin;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);width: 40vmin;height: 13vmin;border-radius: 58% 42% 83% 17% / 44% 39% 61% 56%;
}.star {--star-color: rgba(255, 252, 2, 0.5);-webkit-animation: starFlash 2s infinite;animation: starFlash 2s infinite;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;position: absolute;top: 2vmin;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);width: 15vmin;height: 15vmin;-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}.star::before {--star-color: rgba(255, 252, 2, 0.7);-webkit-animation: starFlash 2s infinite;animation: starFlash 2s infinite;-webkit-animation-delay: 0.25s;animation-delay: 0.25s;content: '';position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 10vmin;height: 10vmin;-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}.star::after {--star-color: rgba(255, 252, 2, 1);-webkit-animation: starFlash 2s infinite;animation: starFlash 2s infinite;content: '';position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 5vmin;height: 5vmin;-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}@-webkit-keyframes starFlash {0% {background-color: transparent;}90% {background-color: var(--star-color);}
}@keyframes starFlash {0% {background-color: transparent;}90% {background-color: var(--star-color);}
}.lights-group {--red-light: radial-gradient(#FF5B30, 60%, transparent);--blue-light: radial-gradient(#00CFE4, 60%, transparent);--yellow-light: radial-gradient(var(--yellow), 60%, transparent);--pink-light: radial-gradient(#E43ACB, 60%, transparent);--light-change-interval: 1s;position: absolute;height: 5vmin;display: -webkit-box;display: flex;-webkit-transform: translateX(-50%) rotate(15deg);transform: translateX(-50%) rotate(15deg);
}.lights-group.bottom {left: 55%;width: 45vmin;bottom: 29vmin;
}.lights-group.top {left: 55%;width: 35vmin;bottom: 47vmin;
}/* Curl of cord */
.light {width: 10vmin;height: 5vmin;border-radius: 50%;box-shadow: 0px 3px 0 var(--background-color);display: -webkit-box;display: flex;-webkit-box-pack: justify;justify-content: space-between;
}/* Light left */
.light::before {content: '';background: var(--yellow-light);width: 3vmin;height: 5vmin;border-radius: 50%;margin-top: 3vmin;margin-left: -1.5vmin;-webkit-animation: changeLightColor var(--light-change-interval) infinite;animation: changeLightColor var(--light-change-interval) infinite;
}.bottom .light:nth-child(2)::before {-webkit-animation-delay: 0.25s;animation-delay: 0.25s;
}.bottom .light:nth-child(3)::before {-webkit-animation-delay: 0.5s;animation-delay: 0.5s;
}.bottom .light:nth-child(4)::before {-webkit-animation-delay: 0.75s;animation-delay: 0.75s;
}.bottom .light::after {-webkit-animation-delay: 0.25s;animation-delay: 0.25s;
}.top .light:nth-child(1)::before {-webkit-animation-delay: 0.25s;animation-delay: 0.25s;
}.top .light:nth-child(2)::before {-webkit-animation-delay: 5s;animation-delay: 5s;
}.top .light:nth-child(3)::before {-webkit-animation-delay: 0.75s;animation-delay: 0.75s;
}.top .light:after {-webkit-animation-delay: 0.25s;animation-delay: 0.25s;
}/* Light right */
.light::after {background: var(--yellow-light);width: 3vmin;height: 5vmin;border-radius: 50%;margin-top: 3vmin;margin-right: -1.5vmin;-webkit-animation: changeLightColor var(--light-change-interval) infinite;animation: changeLightColor var(--light-change-interval) infinite;
}.light:last-child::after {content: '';
}@-webkit-keyframes changeLightColor {0% {background: var(--yellow-light);}25% {background: var(--pink-light);}50% {background: var(--blue-light);}75% {background: var(--red-light);}
}@keyframes changeLightColor {0% {background: var(--yellow-light);}25% {background: var(--pink-light);}50% {background: var(--blue-light);}75% {background: var(--red-light);}
}

圣诞树-前端代码html--动态相关推荐

代码式动态录入生成个人简历页面html页面前端源码
大家好,今天给大家介绍一款,代码式动态录入生成个人简历页面html页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 整个页面分为两个部分,左右布局,左边动态输入一个代码编辑器,根据输入的代 ...
用前端代码编写一个动态的罗盘时钟
用前端代码编写一个动态的罗盘时钟前言一.代码如下 1.index 2.js 3.css 页面效果前言今天给大家分享一个罗盘时钟的前端代码,喜欢的小伙伴帮忙点赞一下噢! 一.代码如下 1.ind ...
转程序员，都去写一写前端代码吧
转自: http://www.oschina.net/news/36972/programmer-write-frond-end-code 你可以认为我是一个极端的人,就像有许多人专注于自己的领域而不 ...
最佳实践系列：前端代码标准和最佳实践
最佳实践系列:前端代码标准 @窝窝商城前端(刘轶/李晨/徐利/穆尚)翻译于2012年版本0.55 @郑昀校对 isobar的这个前端代码标准和最佳实践文档,涵盖了Web应用开发的方方面面,我们翻译了 ...
前端代码标准最佳实践：HTML篇
Web前端代码中,HTML是根本,CSS和JavaScript也是围绕着既有的HTML结构来构建,所以良好的HTML代码结构,除了提高了HTML代码的可读性,可维护性和执行性能之外,也可以让相对应的C ...
基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#)
基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#) 为了完美解析GLSL源码,获取其中的信息(都有哪些in/out/uniform等),我决定做个GLSL编译器的前端(以后简称编译器或 ...
代码逻辑分析_双11模块79.34%的前端代码是怎样智能生成的？
作者|妙净.波本最近几年,AI 渗透到开发领域的方方面面.在前端领域,设计稿生成代码(简称 D2C)就是一个例子.其目标在于通过 AI 助力前端提效升级,杜绝简单重复性的工作内容.今年"双十 ...
大公司里怎样开发和部署前端代码？
这是一个非常有趣的非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中. 在我的印象中,facebook是这个领域的鼻祖,有兴趣.有梯子的同 ...
[Client]前端代码规范及最佳实践
前端代码规范及最佳实践 2014/10/29 | 分类: WEB前端, 工具与资源, 开发 | 0 条评论 | 标签: 代码规范, 前端开发, 最佳实践分享到: 62 本文作者: 伯乐在线 - ...

圣诞树-前端代码html--动态

先看效果图：

分为两部分

圣诞树-前端代码html--动态相关推荐

最新文章

热门文章