圣诞树-前端代码html--动态
生活随笔
收集整理的這篇文章主要介紹了
圣诞树-前端代码html--动态
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
先看效果圖：
分為兩部分
結(jié)構(gòu)：
<!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);} }總結(jié)
以上是生活随笔為你收集整理的圣诞树-前端代码html--动态的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Javaweb 实现简单的用户注册登录（
- 下一篇： 【HTML】重点知识内容~快速上手