728x90
반응형
Clip-Path 속성은 CSS의 일부분을 잘라낼 수 있는 CSS의 속성이다.
마우스 드래그를 통해 Clip-Path 생성하는 사이트: https://bennettfeely.com/clippy/
예시)
loading
loading
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS animatin, transitions and transforms</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.container {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Raleway', Arial, sans-serif;
}
.loader {
width: 300px;
height: 60px;
border: 7px solid #0a3d62;
border-radius: 10px;
text-align: center;
line-height: 60px;
position: relative;
overflow: hidden;
}
.words {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 48px;
text-transform: uppercase;
font-weight: 600;
}
.top-half {
color: #ee5253;
animation: split 4s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.bottom-half {
color: #0a3d62;
animation: split 4s linear infinite reverse;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
@keyframes split {
0% {
transform: translateX(100%);
}
40% {
transform: translateX(0);
}
60% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="container">
<div class="loader">
<span class="words top-half">loading</span>
<span class="words bottom-half">loading</span>
</div>
</div>
</body>
</html>728x90
반응형
'개발공부 일지 > HTML CSS' 카테고리의 다른 글
| CSS) Clip-Path 속성으로 물결치는(Wave) 글자 만들기 (0) | 2024.07.15 |
|---|---|
| CSS)input 태그에서 value와 placeholder의 차이점 (0) | 2021.07.30 |
| CSS) Float 성배 레이아웃 코드(Holy grail layout) (0) | 2021.07.03 |
| CSS) Flex 성배 레이아웃 코드(Holy grail layout) (0) | 2021.07.03 |
| CSS) Grid(그리드) 성배 레이아웃 코드(Holy grail layout) (0) | 2021.07.03 |
댓글