HTML _CSS

Halloween Banner

HiroDaegu 2022. 11. 1. 10:27
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>HALLOWEEN BANNER</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<section class="banner">
		<h2>
			<span style="--i:1;">H</span>
			<span style="--i:2;">a</span>
			<span style="--i:3;">l</span>
			<span style="--i:4;">l</span>
			<span style="--i:5;">o</span>
			<span style="--i:6;">w</span>
			<span style="--i:7;">e</span>
			<span style="--i:8;">e</span>
			<span style="--i:9;">n</span>
		</h2>
		<img src="spider.png" class="spider">
		<img src="pumpkin01.png" class="pumpkin01">
		<img src="pumpkin02.png" class="pumpkin02">
		<img src="spiderWeb.png" class="spiderWeb">
	</section>
</body>

</html>
@import url('https://fonts.googleapis.com/css2?family=Fruktur&display=swap');
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Fruktur', cursive;
}
section 
{
	position: absolute;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0b061f;
}
.spider
{
	position: absolute;
	top: 0;
	animation: animateSpider 15s ease-in-out infinite;
}
@keyframes animateSpider 
{
	0%,100%
	{
		transform: translateY(-500px);
	}
	50% 
	{
		transform: translateY(0px);
	}
}
.pumpkin01
{
	position: absolute;
	top: 100px;
	right: 200px;
	animation: animatePumpkin 8s ease-in-out infinite;
}
.pumpkin02
{
	position: absolute;
	bottom: 20px;
	left: 50px;
	scale: 0.5;
	animation: animatePumpkin 4s ease-in-out infinite;
}
@keyframes animatePumpkin 
{
	0%,100% 
	{
		transform: translateY(-50px);
	}
	50% 
	{
		transform: translateY(50px);
	}
}
.spiderWeb 
{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: screen;
}
h2
{
		position: relative;
    font-size: 12vw;
		font-weight: 100;
		display: flex;
    color: #0e3742;
    text-shadow: none;
    animation: animate 5s infinite linear;
}
 
@keyframes animate 
{
    0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92%
    {
			color: rgba(255, 255, 255, 0.1);
			text-shadow: none;
    }
    18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100%
    {
			color: #ffac09;
			text-shadow: 0 0 10px #ffac09,
										0 0 20px #ffac09,
										0 0 40px #ffac09,
										0 0 80px #ffac09,
										0 0 160px #ffac09;
    }
}
728x90
LIST