티스토리 뷰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Animated Christmas Banner using Html CSS & Javascript | CSS Animation Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f1f1f1;
}
section .box {
position: absolute;
width: 450px;
height: 450px;
}
section .box::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
background: linear-gradient(to right, #000, transparent);
opacity: 0.1;
transform: rotate(45deg);
transform-origin: left;
}
section .box .circle {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #fff, #e4e3e8);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
z-index: 1;
}
section .box .circle::before {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
background: linear-gradient(315deg, #fff, #e4e3e8);
border-radius: 50%;
}
section .box .circle h2 {
position: absolute;
z-index: 2;
font-size: 4em;
color: #ff2a2a;
text-align: center;
}
section i {
position: absolute;
background: #ff2a2a;
border-radius: 100%;
animation: animate 5s linear infinite;
}
section i:nth-child(even) {
background: transparent;
border: 1px solid #ff2a2a;
}
@keyframes animate {
0% {
transform: translateY(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-2000%);
opacity: 0;
}
}
</style>
</head>
<body>
<section>
<div class="box">
<div class="circle">
<h2>Happy<br>Christmas</h2>
</div>
</div>
</section>
<script>
function bubbles() {
var count = 200;
var section = document.querySelector('section');
var i = 0;
while (i < count) {
var bubble = document.createElement('i');
var x = Math.floor(Math.random() * window.innerWidth);
var y = Math.floor(Math.random() * window.innerHeight);
var size = Math.random() * 10;
bubble.style.left = x+'px';
bubble.style.top = y+'px';
bubble.style.width = 1+size+'px';
bubble.style.height = 1+size+'px';
bubble.style.animationDuration = 5+size+'s';
bubble.style.animationDelay = -size+'s';
section.appendChild(bubble);
i++;
}
}
bubbles();
</script>
</body>
</html>출처: www.youtube.com/watch?v=j7MWgFeL1pw&list=LL&index=7&t=69s&ab_channel=OnlineTutorials
'Youtube 따라하기' 카테고리의 다른 글
| 파티클 이펙트 (0) | 2021.01.29 |
|---|---|
| Clip-path를 이용한 텍스트 애니메이션 (0) | 2021.01.04 |
| Anime.js를 사용하여 Vanilla JS로 SVG 모핑 페이지 전환 만들기! (0) | 2020.12.21 |
| WebGL을 이용한 호버 효과 (0) | 2020.12.14 |
| 버튼 호버 효과 (0) | 2020.12.11 |