비전공자 개발일기

Ring Of Fire 본문

HTML _CSS

Ring Of Fire

HiroDaegu 2023. 1. 8. 00:51
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>RING OF FIRE</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="circle"></div>
    <div class="circle"></div>
    <svg>
        <filter id="wavy">
            <feTurbulence x="0" y="0" baseFrequency="0.009" numOctaves="5" seed="2">
                <animate attributeName="baseFrequency" dur="60s" values="0.02; 0.005; 0.02" repeatCount="indefinite">
            </feTurbulence>
            <feDisplacementMap in="SourceGraphic" scale="30">
        </filter>
    </svg>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative ;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #000;
}

.circle {
    width: 600px;
    height: 600px;
    filter: url(#wavy) blur(1px);
}

.circle::before {
    content: '';
    position: absolute;
    top: 100px;
    left: 100px;
    right: 100px;
    bottom: 100px;
    border: 20px solid #FFF;
    border-radius: 50%;
    box-shadow: 0 0 50px #0F0, inset 0 0 50px #0F0;
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0002);
    animation: animate 5s linear infinite;
}

.circle::after {
    content: '';
    position: absolute;
    top: 100px;
    left: 100px;
    right: 100px;
    bottom: 100px;
    border: 20px solid #FFF;
    border-radius: 50%;
    box-shadow: 0 0 10px #FFF, inset 0 0 20px #FFF;
}

.circle:nth-child(2)::before {
    animation-delay: -2.5s;
}

@keyframes animate {
    0% {
        box-shadow: 0 0 50px #0F0, inset 0 0 50px #0F0;
        filter: hue-rotate(0);
    }
    20% {
        box-shadow: 0 0 60px #0F0, inset 0 0 60px #0F0;
    }
    40% {
        box-shadow: 0 0 40px #0F0, inset 0 0 40px #0F0;
        filter: hue-rotate(0);
    }
    60% {
        box-shadow: 0 0 80px #0F0, inset 0 0 80px #0F0;
        filter: hue-rotate(0);
    }
    80% {
        box-shadow: 0 0 100px #0F0, inset 0 0 100px #0F0;
        filter: hue-rotate(0);
    }
    100% {
        box-shadow: 0 0 50px #0F0, inset 0 0 50px #0F0;
        filter: hue-rotate(360deg);
    }
}

svg {
    width: 0;
    height: 0;
}
728x90
LIST

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

Multi Colored Text  (0) 2023.01.10
Mail Button Micro-Interaction  (0) 2023.01.09
Animated Progress Bar  (0) 2023.01.07
Foggy Rain Animation  (0) 2023.01.06
Dynamic Calendar  (0) 2023.01.05
'HTML _CSS' Related Articles more