열심히 일하며 달려오다가 잠깐 시간이 되서,
그동안 생각만 하고 있던 wave 효과들을 한 번 나중에 써먹어볼 생각으로 구글링 하던 중
지금까지 생각하지 못한 clip-path 방법으로 wave 효과를 주는 방법이 있어서 따라해 봄~
일단 결과물은...
직접 해보니
쉽게 구현이 가능함.🙀
예시 코드
<!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>animated waves inner text</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap">
<style>
html,
body{
height: 100%;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
background: #fff;
min-height: 100vh;
align-items: center;
justify-content: center;
font-family: 'Noto Sans KR', sans-serif;
}
.content{
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.content .text,
.content .text:before{
display: block;
color: #fff;
}
.content .text{
position: relative;
font-size: 8em;
color: pink;
}
.content .text:before{
content: "minitoy";
position: absolute;
font-size: 1em;
color: hotpink;
animation: animate 3s ease-in-out infinite;
}
@keyframes animate{
0%,
100%{
clip-path: polygon(
0% 45%,
16% 44%,
33% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%
);
}
50%{
clip-path: polygon(
0% 60%,
15% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 45%,
100% 46%,
100% 100%,
0% 100%
);
}
}
</style>
</head>
<body>
<section>
<div class="content">
<div class="text">minitoy</div>
</div>
</section>
</body>
</html>
코드를 보면 글자 안에 들어가있는 것처럼 보이게 하는 핵심 코드는 바로 clip-path임.
clip-path
clip-path는 inset, circle, ellipse, polygon와 같이 기본적인 도형부터
직접 도형을 그릴 수 있는 path()도 가능함. (포토샵의 path툴처럼!)
이제 왠만해서 포토샵에 있는 기본적인 기능들은 브라우저에서 가능한 느낌이...
혹시 크롬에서만 되는게 아닌가 싶어 보니 왠만한 환경에서 쓸 수 있음.
오페라 브라우저의 path()나 iOS 사파리 정도만 체킹하면 될 듯~~
728x90
반응형
'WWWEB > CSS' 카테고리의 다른 글
| [css] 텍스트 안에 그라데이션 배경 움직여보기 (0) | 2023.06.08 |
|---|---|
| 최근 네이버 CSS 초기화 코드 (mo/pc) (0) | 2023.05.25 |
| max-height를 이용한 부드럽게 열리는 더보기 (0) | 2023.05.10 |
| [css] 모서리 종이 말려지는 효과를 만들어봄. (쏘 이지~) (2) | 2023.05.08 |
| 단어가 짧을 때 양쪽 정렬(text-align: justify) 방법 [only css] (1) | 2023.04.11 |
| [ css ] position: sticky가 안 먹는 경우, 적용 조건 (0) | 2023.03.28 |
| [css] 말줄임 여러 줄 예시 (1) | 2023.02.14 |
| css3 카드 뒤집기 효과 (backface-visibility: hidden;) (1) | 2023.01.31 |
댓글