- html -
- 이상했던거 :해결 완! -
. img 2두개가 있으니까 rock이 앞으로 나옴. (내가 원하던 대로 나옴)
.bg_box .bg1 .img2 {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.bg_box .bg1 .img2 {position: absolute; left: 0; bottom: 0; z-index: 2;;}
<div class="bg_box">
<div class="bg1">
<img src="image/wavebg.png" alt="" class="img1">
<img src="image/rock.png" alt="" class="img2">
</div>
</div>
근데 .img1이 없을 수 없는 상황이니까 아래거를 .img1로 바꿨더니 또 다르게 나옴.
.bg_box .bg1 .img2 {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.bg_box .bg1 .img1 {position: absolute; left: 0; bottom: 0; z-index: 2;}
위아래를 바꿨더니 됨. z-index가 아래에 있어서 그랬는데, 선생님 따라하다보니 이상하게 된듯. 정신차령
.bg_box .bg1 .img1 {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.bg_box .bg1 .img2 {position: absolute; left: 0; bottom: 0; z-index: 2;}
<div class="bg_box">
<div class="bg1">
<img src="image/wavebg.png" alt="" class="img1">
<img src="image/rock.png" alt="" class="img2">
</div>
</div>
-끝-
약간 이상하긴 한데, 선생님이 하신거랑 내가 한거랑은 다르니까 집에가서 다시 내가 하고 싶었던걸로 적용할 예정. 새로운 기능들 알아본걸로 만족
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>crest</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">
<style>
*{margin: 0; padding: 0;}
li {list-style: none;}
a {text-decoration: none; color: #000;}
img {vertical-align: top;}
body {overflow-y: hidden;}
body {font-family: "Cormorant Garamond";}
.bg_box .bg1 .img1 {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; animation: bgAni 10s forwards; animation-delay: 3s;}
@keyframes bgAni {
0% {height: 200%;}
100% {height: 100%;}
}
.bg_box .bg1 .img2 {position: absolute; left: 0; bottom: 0; z-index: 2; animation: tree 7s forwards;}
@keyframes tree {
0% {height: 150%;}
100% {height: 100%;}
}
header {position: absolute; max-width: 1400px; margin: 0 auto; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; align-items: center; width: 100%; z-index: 3;}
header h1 {width: 100px;}
header h1 img {width: 100%;}
header nav {}
header nav .gnb {display: flex;}
header nav .gnb li {font-size: 22px; transition: 0.25s; text-shadow: 0 0 20px rgba(0,0,0,1);}
header nav .gnb li a {color: #fff; display: block; padding: 10px 30px;}
header nav .gnb:hover li {transform: scale(0.9); opacity: 0.7;}
header nav .gnb li:hover {transform: scale(1.2); opacity: 1;}
header nav .gnb li:hover a {color: #fff;}
.textbox {border: 1px solid #000; position: absolute; right: 260px; top: 50%; transform: translateY(-50%); z-index: 3;}
.textbox ul {display: flex;}
.textbox li {font-size: 50px; color: #fff; width: 60px;}
.textbox li span {display: block; padding: 5px 0; animation:text 3s forwards; position: relative; opacity: 0; }
.textbox li span.mb50 {margin-bottom: 50px;}
@keyframes text
{0% {left: -300px; transform: rotate(20deg) scale(0.3); top: 100px; opacity: 0;}
100% {left: 0; transform: rotate(0) scale(1); top: 0; opacity: 1;}}
.textbox li:nth-child(2) span:nth-child(2) {animation-delay: 0.1s;}
.textbox li:nth-child(2) span:nth-child(3) {animation-delay: 0.3s;}
.textbox li:nth-child(2) span:nth-child(4) {animation-delay: 0.5s;}
.textbox li:nth-child(2) span:nth-child(5) {animation-delay: 0.7s;}
.textbox li:nth-child(2) span:nth-child(6) {animation-delay: 0.9s;}
.textbox li:nth-child(2) span:nth-child(7) {animation-delay: 1.1s;}
.textbox li:nth-child(2) span:nth-child(8) {animation-delay: 1.3s;}
.textbox li:nth-child(2) span:nth-child(9) {animation-delay: 1.5s;}
.textbox li:nth-child(2) span:nth-child(9) {animation-delay: 1.7s;}
.textbox li:nth-child(1) span:nth-child(1) {animation-delay: 3s}
.textbox li:nth-child(1) span:nth-child(2) {animation-delay: 3.2s}
.textbox li:nth-child(1) span:nth-child(3) {animation-delay: 3.4s}
.textbox li:nth-child(1) span:nth-child(4) {animation-delay: 3.6s}
.textbox li:nth-child(1) span:nth-child(5) {animation-delay: 3.8s}
.textbox li:nth-child(1) span:nth-child(6) {animation-delay: 4s}
.textbox li:nth-child(1) span:nth-child(7) {animation-delay: 4.2s}
.textbox li:nth-child(1) span:nth-child(8) {animation-delay: 4.4s}
.textbox li:nth-child(1) span:nth-child(9) {animation-delay: 4.6s}
.textbox li:nth-child(1) span:nth-child(10) {animation-delay: 4.8s}
.water_box{}
.water_box .water1 {position: absolute; background: url(image/effect.png); width: 100%; height: 100vh; left: 0; top: 0; animation: water1 5s infinite linear;}
@keyframes water1 {
0% {background-position: 0 0;}
100% {background-position: 0 900px;}
}
.water_box2{}
.water_box .water2 {position: absolute; background: url(image/effect.png); width: 100%; height: 100vh; left: 0; top: 0; animation: water1 5s infinite linear;}
@keyframes water2 {
0% {background-position: 0 0;}
100% {background-position: 0 900px;}
}
.water_box3{}
.water_box .water3 {position: absolute; background: url(image/effect.png); width: 100%; height: 100vh; left: 0; top: 0; animation: water1 5s infinite linear;}
@keyframes water3 {
0% {background-position: 0 0;}
100% {background-position: 0 900px;}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<h1><img src="image/logo.png" alt=""></h1>
<nav>
<div class="gnb">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pattern</a></li>
<li><a href="#">Object</a></li>
<li><a href="#">Contanct</a></li>
</div>
</nav>
<audio src="audio/music.mp3" controls></audio>
</header>
<div class="textbox">
<ul>
<li>
<span>B</span>
<span>o</span>
<span>r</span>
<span>n</span>
<span class="mb50"></span>
<span>f</span>
<span>r</span>
<span>o</span>
<span>m</span>
</li>
<li>
<span>t</span>
<span>h</span>
<span>e</span>
<span class="mb50"></span>
<span>b</span>
<span>r</span>
<span>o</span>
<span>k</span>
<span>e</span>
<span>n</span>
</li>
</ul>
</div>
<div class="bg_box">
<div class="bg1">
<img src="image/wavebg.png" alt="" class="img1">
<img src="image/rock.png" alt="" class="img2">
</div>
</div>
<div class="water_box">
<div class="water1">
<div class="water2">
<div class="water3">
</div>
</div>
</div>
</body>
</html>
e1313443-3d42-11f1-8d26-80615f0bcc64.mp4
1.38MB
클로드랑 아예 새롭게 시작했는데 애니메이션이 너무 어색함. 아무래도 png 파일로 해보려고 하니까 잘 안되는것 같기도 하고. 일단 여기까지만.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Crest</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=EB+Garamond:ital,wght@0,400;1,400&display=swap" rel="stylesheet"/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: #0a1628;
}
/* ── Hero 컨테이너 ── */
.hero {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
/* ── 레이어 공통 ── */
.layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Layer 1: 배경 바다 */
.layer-bg {
z-index: 1;
background: url(image/bg.png) center center / cover no-repeat;
animation: slowZoom 20s ease-in-out infinite alternate;
}
@keyframes slowZoom {
from { transform: scale(1); }
to { transform: scale(1.04); }
}
/* Layer 2: 파티클/물보라 효과 */
.layer-effect {
z-index: 4;
background: url('image/effect.png') center center / cover no-repeat;
position: absolute;
opacity: 0.9;
mix-blend-mode: screen;
animation: effectWave 12s ease-in-out infinite alternate;
}
@keyframes effectWave {
0% {
/* 왼쪽 아래에서 대기 */
transform: scale(1) translateX(-30px) translateY(10px) rotate(-1deg);
opacity: 0.7;filter: brightness(1) blur(0px);
}
50% {
/* 오른쪽 위로 치솟으며 확대 */
transform: scale(1.15) translateX(15px) translateY(-20px) rotate(1deg);
opacity: 1;filter: brightness(1.3) blur(2px);
}
100% {
/* 다시 살짝 뒤로 빠짐 */
transform: scale(1.05) translateX(40px) translateY(5px) rotate(-0.5deg);
opacity: 0.8;filter: brightness(1.1) blur(1px);
}
}
/* Layer 3: 바위 (파도 앞) */
.layer-rock {
z-index: 3;
background: url('image/rock.png') center bottom / cover no-repeat; animation: rockMovement 4s ease-in-out infinite alternate;}
@keyframes rockMovement {
from { transform: translateX(-5px) translateY(0) rotate(0deg) scale(1.0); }
to { transform: translateX(5px) translateY(-15px) rotate(0.5deg) scale(1.05); } /* 바위는 아주 미세하게만! */}
/* ── 네비게이션 ── */
nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 40px 200px;
}
nav ul {
list-style: none;
display: flex;
gap: 44px;
}
nav ul li a {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 300;
letter-spacing: 0.08em;
color: #ffffff; opacity: 0.7;
text-decoration: none;
transition: color 0.3s ease, letter-spacing 0.3s ease; transform: scale(0.9)
}
nav ul li a:hover {
color: #ffffff; opacity: 1;
transform: scale(1.2)
}
/* ── 왼쪽 로고 영역 ── */
.logo-area {
position: absolute;
top: 40px;
left: 60px;
transform: translateY(0%);
z-index: 10;
display: flex;
flex-direction: column;
gap: 8px;
}
.logo-subtitle {
width: auto;
height: 32px;
object-fit: contain;
object-position: left center;
opacity: 0;
transform: translateY(-10px);
animation: fadeDown 1s ease forwards 0.4s;
}
.logo-main {
width: auto;
height: 110px;
object-fit: contain;
object-position: left center;
opacity: 0;
transform: translateY(12px);
animation: fadeUp 1.1s ease forwards 0.7s;
}
@keyframes fadeDown {
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
/* ── 하단 그라디언트 vignette ── */
.vignette {
position: absolute;
inset: 0;
z-index: 4;
background:
radial-gradient(ellipse at center, transparent 40%, rgba(5, 12, 28, 0.45) 100%),
linear-gradient(to bottom, rgba(5,12,28,0.15) 0%, transparent 30%, transparent 65%, rgba(5,12,28,0.55) 100%);
pointer-events: none;
}
</style>
</head>
<body>
<section class="hero">
<!-- 배경 -->
<div class="layer layer-bg"></div>
<!-- 파티클/물보라 -->
<div class="layer layer-effect"></div>
<!-- 비네트 (분위기 오버레이) -->
<div class="vignette"></div>
<!-- 바위 (맨 앞) -->
<div class="layer layer-rock"></div>
<!-- 네비게이션 -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pattern</a></li>
<li><a href="#">Object</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- 로고 영역 -->
<div class="logo-area">
<img class="logo-subtitle" src="image/subtitle.png" alt="Bron from the broken" />
<img class="logo-main" src="image/logo.png" alt="Crest" />
</div>
</section>
</body>
</html>'web design' 카테고리의 다른 글
| 04.22 - 반응형 웹 만들기 (0) | 2026.05.29 |
|---|---|
| 04.22 - holo (팀플) (0) | 2026.05.29 |
| 04.21 - holo (팀플) (0) | 2026.05.29 |
| 04.20 - html 애니메이션 (0) | 2026.05.29 |
| 04.20 (0) | 2026.05.29 |