Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How does html+css make a Christmas tree

2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article mainly introduces html+css how to make a Christmas tree, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Html code

Html+css makes Christmas Tree

Merry Christmas

CSS style

Html,body {

Width:100%

Height:100%

}

* {

Margin:0

Padding:0

}

Body {

Background-color:#000000

}

.word {

Font-size:60px

Text-align:center

Color:gold

Padding-top:70px

Letter-spacing:5px

Text-shadow:2px 4px 9px rgba (255,255,255,0.7)

}

/ * the outer div*/ of the Christmas tree

.tree {

Width:200px

Height:300px

Margin:110px auto 0 auto

Position: relative

/ * relative positioning * /

/ * border:1px solid # fff;*/

}

.star {

Width:10px

Height:10px

Position:absolute

/ * background-color:#fff;*/

Border-radius: 50%

Top:0px

Z-index: 1000

Left:50%

Transform:translateX (- 50%)

Box-shadow: 0 70px 30px rgb (253,253253)

}

. star-in {

Position:absolute

Left:35%

Top:70%

Border-right:200px solid transparent

Border-bottom: 150px solid gold

Border-left:200px solid transparent

Transform:translateX (- 50%) translateY (- 50%) rotate (35deg) scale

}

. star-in::before {

Border-bottom:140px solid gold

Border-left:65px solid transparent

Border-right:65px solid transparent

Position:absolute

Top:-90px

Left:-140px

Content:''

Transform:rotate (- 35deg)

}

. star-in::after {

Border-bottom:140px solid gold

Border-left:210px solid transparent

Border-right:200px solid transparent

Position:absolute

Top:3px

Left:-200px

Content:''

Transform:rotate (- 70deg)

}

.leaf {

Position:absolute

Left:50%

Top:3%

Margin-left:-30px

Background-color:rgba (14, 10, 10, 14)

Width:60px

Height:60px

Border-radius:0 10px 35px 10px

Transform:rotate (45deg)

Box-shadow: 2px 7px 2px rgba (43 pencils 43 pencils 43 pas 0.2)

}

.edge {

Position:absolute

Left:0

Bottom: 0

Background:rgba (14, 10, 10, 14)

Width:25px

Height:30px

Border-radius:0 10px 35px 10px

Transform:translateY (50%) translateX (0)

}

.edge.right {

Position:absolute

Left:unset

Bottom:unset

Top:0

Right:0

Background:rgba (14, 10, 10, 14)

Width:25px

Height:30px

Border-radius:0 10px 35px 10px

Transform:translateY (0) translateX (50%)

}

/ * even numbers modify the background color * /

.leaf:nth-child (eve) {

Background-color: # 0f880f

}

.leaf:nth-child (eve) .edge {

Background-color: # 0f880f

}

/ * Top * /

.leaf:nth-child (1) {

Z-index: 100

Transform: rotate (45deg) scale

}

/ * second * /

.leaf:nth-child (2) {

Z-index: 99

Top:15%

Transform: rotate (45deg) scale (1.3)

}

.leaf:nth-child (3) {

Z-index: 98

Top:28%

Transform:rotate (45deg) scale (1.6)

}

.leaf:nth-child (4) {

Z-index: 97

Top:41%

Transform:rotate (45deg) scale (1.9)

}

.leaf:nth-child (5) {

Z-index: 96

Top:54%

Transform:rotate (45deg) scale (2.2)

}

.trunk {

Width:25px

Height:45px

Border-radius:0 0 3px 3px

Position:absolute

Left:50%

Transform:translate (- 50%)

Bottom:20px

Z-index: 1

Box-shadow: 0 80px 5px rgb (253,253253)

Background:linear-gradient (6d411b 0% 5a341d 64%)

}

.ball {

Width:20px

Height:20px

Background:#f00

Box-shadow:-1px-1px 6px inset # 600 1px 1px 8px inset # ffc9c9

Border-radius: 50%

Z-index:101

Position:absolute

}

.b1 {

Left:25%

Top:30%

}

.b2 {

Left:35%

Top:50%

}

.b3 {

Left:65%

Top:20%

}

.b4 {

Left:45%

Top:22%

}

.b5 {

Left:40%

Top:72%

}

.b6 {

Left:60%

Top:52%

}

.b7 {

Left:50%

Top:62%

}

.b8 {

Left:80%

Top:42%

}

.b9 {

Left:10%

Top:62%

}

.b4, .b5, .b6 {

Background:#ececec

Box-shadow:-1px-1px 6px inset # 615f5fMagne1px 1px 8px inset # fff

}

.b7, .b8, .b9 {

Background:gold

Box-shadow:-1px-1px 6px inset # 3a3101 1px 6px inset 1px 1px 8px inset # fff

}

.sparkle span {

Display:block

Position:absolute

Font-size: 20px

Z-index: 101

Color:#fff

Animation: sparkle 1.5s ease infinite alternatel

}

/ * flicker animation * /

@ keyframes sparkle {

0% 100% {

Transform: scale (1)

}

50% {

Transform: scale (1.5)

}

}

.sparkle span:nth-child (1) {

Left:30%

Top:40%

}

.sparkle span:nth-child (2) {

Left:40%

Top:27%

Font-size: 15px

}

.sparkle span:nth-child (3) {

Left:50%

Top:57%

Font-size: 12px

}

.sparkle span:nth-child (4) {

Left:70%

Top:67%

Font-size: 14px

}

.sparkle span:nth-child (5) {

Left:54%

Top:20%

Font-size: 20px

}

.sparkle span:nth-child (6) {

Left:60%

Top:33%

Font-size: 20px

}

.blink div {

Width:3px

Height:3px

Background: # fff

Z-index: 101

Position:absolute

Border-radius: 50%

Animation:blink 1.5s ease infinite alternate

}

.blink div:nth-child (2) {

Left:34%

Top:13%

Transform: scale (1.2)

}

.blink div:nth-child (3) {

Left:54%

Top:43%

Transform: scale (0.6)

}

.blink div:nth-child (4) {

Left:64%

Top:33%

Transform: scale (1.4)

}

.blink div:nth-child (5) {

Left:34%

Top:63%

Transform: scale (1.8)

}

.blink div:nth-child (6) {

Left:14%

Top:76%

Transform: scale (1.5)

}

@ keyframes blink {

0% {

Box-shadow: 0 0 0 # fff

}

25% {

Box-shadow: 0 0 1px 1px # fff

}

50% {

Box-shadow: 0 0 2px 2px # fff

}

75% {

Box-shadow: 0 0 3px 3px # fff

}

100% {

Box-shadow: 0 0 4px 4px # fff

}

}

Thank you for reading this article carefully. I hope the article "how to make a Christmas Tree in html+css" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report