최근 공부중인 Css 스승인 [Coding Artist]를 복기하여 본인의 Css공부를 기록하여 보려한다.
https://www.youtube.com/watch?v=6o08ebSeZtM
See the Pen Split And Reveal Text Effect | CSS Text Animation by ektjtthsrk (@minos79) on CodePen.
Html 코드이다.
<!DOCTYPE html>
<html lang="en">
<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>Split $ Reveal Text</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"
</head>
<body>
<div class="container">
<p>1stminokingdom.tistory.com</p>
<h1>HajaGo</h1>
<h1>HajaGo</h1>
</div>
</body>
</html>Css 코드이다.
*{
padding:0;
margin:0;
box-sizing:border-box;
font-family:"Poppins", sans-serif;
}
body {
background-color: #0a0a0a;
}
.container {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
height: 100vh;
display: flex;
justify-content: center;
text-align: center;
height: 14.37em;
width: 28.12em;
cursor: pointer;
}
h1 {
background-color: #0a0a0a;
color: #ffffff;
font-size: 9.37em;
position: absolute;
}
p {
color: #ff3c78;
font-size: 2em;
position: absolute;
transform: translatey(-50%);
top: 50%;
}
.container:hover h1:nth-child(2) {
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
transform: translateY(-50px);
transition: 0.3s;
}
.container:hover h1:nth-child(3) {
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
transform: translateY(50px);
transition: 0.3s;
}코드 진행은 이렇다.
<body>
<div class="container">
<p>1stminokingdom.tistory.com</p>
<h1>HajaGo</h1>
<h1>HajaGo</h1>
</div>
</body>class 태그인 container 속에 <p>, <h1>가 있는데 이들을 모두 가운데로 몰아넣는다.
.container {
position: absolute;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
left: 50%;
top: 50%;
height: 14.37em;
width: 28.12em;
cursor: pointer;
}
모두 한가운데로 몰아넣게 되면 Layer성질에 의해서 가장 위에 있는 태그가 가장 하단에 들어가고 가장 마지막 태그가 위에 올라오게 됨으로 자연스럼게 가장 마지막에 등장하는 HajaGo만 첫 화면에 보이게 된다.
그리고 나서 마우스가 hover 상태가 되면 글자들이 일부 보이지 않게 되면서 위치를 위 아래로 옮겨가면서 뒤에 있는 본인의 티스토리 글씨가 보이게 되는것이다.
.container:hover h1:nth-child(2) {
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
transform: translateY(-50px);
transition: 0.3s;
}
.container:hover h1:nth-child(3) {
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
transform: translateY(50px);
transition: 0.3s;
}
여기서 한가지 팁을 드리면 polygon 안에 저 숫자를 더 편하게 얻기 위해서는
https://bennettfeely.com/clippy/
Clippy — CSS clip-path maker
About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape
bennettfeely.com
여기에 들어가면 원하는 모양을 선택해서 움직이면 polygon의 수치를 쉽게 얻을 수 있다.
그럼 오늘도 맛있는 코드 냠냠
'GAS > [Css_손코딩]' 카테고리의 다른 글
| Image Zoom Effect On Hover CSS (0) | 2023.06.30 |
|---|---|
| Apply Shadow To Clipped Elements (0) | 2023.06.20 |
| 가상클래스의 꽃(before after) (0) | 2023.06.20 |
| Stunning 3D Effect With CSS (0) | 2023.06.19 |
| Css_grid_#1 (0) | 2023.06.19 |
댓글