How does html+css make a Christmas tree
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!
