250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- keyframes
- effect
- css3
- ipad
- 비전공 개발자
- jQuery
- iPhone
- image
- 애니메이션
- 개발자
- 비전공자
- IOS
- front-end
- button
- MAC
- javascript
- CSS
- php
- 자바스크립트
- iOS 개발자
- HTML
- 풀스택
- 백엔드
- hover
- Animation
- react
- 프론트엔드
- html5
- SWIFT
- xcode
Archives
- Today
- Total
비전공자 개발일기
Christmas Tree 본문
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CHRISTMAS TREE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tree">
<div class="top" style="--j:0">
<span style="--i:0"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
</div>
<div class="top" style="--j:1">
<span style="--i:0"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
</div>
<div class="top" style="--j:2">
<span style="--i:0"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
</div>
<div class="top" style="--j:3">
<span style="--i:0"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
</div>
<div class="bottom">
<span style="--i:0"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
</div>
<span class="shadow"></span>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #E8FFE8;
}
.tree {
position: relative;
top: -100px;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(30deg);
animation: animate 6s linear infinite;
}
.tree::before {
content: '⭐';
position: absolute;
top: -120px;
left: calc(50% - 45px);
font-size: 4em;
}
@keyframes animate {
0% {
transform: rotateX(-20deg) rotateY(360deg);
}
100% {
transform: rotateX(-20deg) rotateY(0);
}
}
.tree div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: translateY(calc(100px * var(--j)));
}
.tree div.top span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #69C069, #77DD77);
clip-path: polygon(50% 0%, 0 100%, 100% 100%);
transform-origin: bottom;
border-bottom: 10px solid #00000019;
transform: rotateY(calc(90deg * var(--i))) rotateX(30deg) translateZ(173px) ;
}
.tree div.bottom span {
position: absolute;
top: 350px;
left: calc(50% - 30px);
width: 60px;
height: 100%;
background: linear-gradient(90deg, #BB4622, #DF7214);
/* clip-path: polygon(50% 0%, 0 100%, 100% 100%); */
transform-origin: bottom;
border-bottom: 10px solid #00000055;
transform: rotateY(calc(90deg * var(--i))) translateZ(30px) ;
}
.shadow {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: #0002;
transform-style: preserve-3d;
transform: rotateX(90deg) translateZ(-500px);
filter: blur(20px);
}
728x90
LIST
'HTML _CSS' 카테고리의 다른 글
Corner Text Parallax Effects (0) | 2022.09.17 |
---|---|
Gradient Circle Text (0) | 2022.09.15 |
Growing Smiley Face Effects (0) | 2022.09.12 |
Hover Effect (0) | 2022.09.10 |
Colorful Glowing Liquid Bowl (0) | 2022.09.09 |