반응형
[Html & CSS] css를 활용하여 움직이는 효과 만드는 방법 !!
물결이 치는 것처럼 div박스를 만들어봤습니다 ㅎ
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wave Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.wave-container {
position: relative;
width: 200px;
height: 150px; /* 물결의 높이를 조절할 수 있습니다. */
overflow: hidden;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00bcd4;
opacity: 0.7;
transform-origin: center bottom;
animation: waveAnimation 4s linear infinite;
}
@keyframes waveAnimation {
0%, 100% {
transform: scaleY(0.8) translateY(30px);
}
50% {
transform: scaleY(1) translateY(0);
}
}
</style>
</head>
<body>
<div class="wave-container">
<div class="wave"></div>
</div>
</body>
</html>결과값
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [Html & CSS] input에 검색 시 정규식으로 영어랑 숫자만 입력 시키는 방법 !! (0) | 2023.08.10 |
|---|---|
| [Html & CSS] 사이즈별 파비콘(favicon) 만드는 방법 !! (0) | 2023.07.25 |
| [Html & CSS] 사진 클릭하면서 넘기는 효과 주는 방법 !! (0) | 2023.07.22 |
| [Html & CSS] 슬라이드쇼 구현하는 방법 !! (Slick 라이브러리를 활용) (0) | 2023.07.08 |
| [Html & CSS] javascript를 활용하여 input 태그에 엔터키 이벤트 확인하는 방법 !! (0) | 2023.07.07 |
댓글