비전공자 개발일기

SOLAR Eclipse 본문

HTML _CSS

SOLAR Eclipse

HiroDaegu 2022. 10. 26. 00:57
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>SOLAR ECLIPSE</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="circle"></div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    height: 50vh;
    display: grid;
    place-items: center;
}

.circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #FF9540;
    position: relative;
    box-shadow: 0 0 10px #FF4500, 0 0 40px #FF4500, 0 0 80px #FF4500;
}

.circle::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #000;
    animation: animate 3s linear infinite alternate;
}

@keyframes animate {
    0% {
        transform: translate(-50px, 50px) scale(0.9);  
    }
    50%, 75% {
        transform: translate(0px, 0px) scale(1.02);
        box-shadow: 0 0 10px #F9F3F2 0 0 80px 8px #C79388;
    }
    100% {
        transform: translate(50px, -50px) scale(0.9);
        box-shadow: none;
    }
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

3D Neon Cube  (0) 2022.10.28
Unfold CSS Effect  (0) 2022.10.27
Abstract BG Generator with anime.js  (0) 2022.10.25
Light 3D Cube  (0) 2022.10.24
Candle Animation  (0) 2022.10.22
'HTML _CSS' Related Articles more