티스토리 뷰
CSS clip-path를 사용해 IE에서는 제대로 나오지 않습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Clip-path를 이용한 텍스트 애니메이션</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
position: relative;
width: 100%;
height: 100vh;
}
section .box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
section .box.box2 {
background: #7f54ce;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
section .box h2 {
color: #7f54ce;
font-size: 6vw;
text-align: center;
display: flex;
flex-direction: column;
animation: animate 3s ease-in-out infinite;
}
section .box h2 span:nth-child(2) {
line-height: 1em;
font-size: 2em;
}
section .box.box2 h2 {
color: #fff;
}
@keyframes animate {
0%, 45% {
transform: translateY(-70%);
}
55%, 90% {
transform: translateY(70%);
}
100% {
transform: translateY(-70%);
}
}
</style>
</head>
<body>
<section>
<div class="box box1">
<h2>
<span>Bye Bye</span>
<span>2020</span>
</h2>
</div>
<div class="box box2">
<h2>
<span>Happy New Year</span>
<span>2021</span>
</h2>
</div>
</section>
</body>
</html>출처: www.youtube.com/watch?v=2xYN32DOGRE&list=LL&index=1&t=195s&ab_channel=OnlineTutorials
'Youtube 따라하기' 카테고리의 다른 글
| 파티클 이펙트2 (0) | 2021.02.01 |
|---|---|
| 파티클 이펙트 (0) | 2021.01.29 |
| Anime.js를 사용하여 Vanilla JS로 SVG 모핑 페이지 전환 만들기! (0) | 2020.12.21 |
| WebGL을 이용한 호버 효과 (0) | 2020.12.14 |
| 버튼 호버 효과 (0) | 2020.12.11 |