[구현]
1. 물방울의 모양 표현
물방울 구현을 위한 border-radius 모양이 복잡해 보이는데 이는 Fancy border radius generator 사이트를 통해 간단히 만들 수 있다.
[ https://9elements.github.io/fancy-border-radius/#68.50.36.24--. ]
Fancy Border Radius Generator
Generator to build organic shapes with CSS3 border-radius
9elements.github.io
2. 물방울 질감 표현
물방울 질감은 box-shadow를 이용해 표현한다.
inset 은 그림자를 요소 내부에 만들때 쓰는 명령어 인데 이를 이용해 물방울 질감을 표현할수 있을 만큼
box-shadow를 조절해 가면서 구현한다.
3. 물방울 상단 흰색 표시
before, after 가상선택자를 이용해 흰색 모양을 표현한다.
물방울의 position은 relative으로 두고 흰색모양은 absolute로 만들어 위치 조정을 한다.
4. 물방울들
물방울들은 가상선택자 nth-child(N) 을 사용해 각각 scale로 크기, translate로 위치, radius 값을 바꿔 적용한다.
[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>waterDrops</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="drops">
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
</div>
</body>
</html>[css]
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #edeeed;
}
.drops {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* === 물방울 만들기 === */
.drop {
position: absolute;
width: 150px;
height: 150px;
/* 뒤의 배경색과 일치하게 */
background: transparent;
border-radius: 51% 49% 57% 43% / 41% 50% 50% 59%;
/* 물방울 질감을 표현 */
box-shadow: inset 10px 10px 10px rgba(0, 0, 0, 0.05),
15px 25px 10px rgba(0, 0, 0, 0.1), 15px 20px 20px rgba(0, 0, 0, 0.05),
inset -10px -10px 15px rgba(255, 255, 255, 0.9);
}
/* === 물방울 흰색부분 === */
.drop::before {
content: "";
position: absolute;
top: 25px;
left: 35px;
background-color: #fff;
width: 20px;
height: 20px;
border-radius: 23% 77% 50% 50% / 41% 50% 50% 59%;
}
.drop::after {
content: "";
position: absolute;
top: 25px;
left: 65px;
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 74% 26% 50% 50% / 41% 50% 50% 59%;
}
/* === 물방울 여러개 만들기 === */
.drop:nth-child(2) {
transform: scale(0.5) translate(-200px, 180px);
border-radius: 68% 32% 55% 45% / 41% 56% 44% 59%;
}
.drop:nth-child(3) {
transform: scale(0.4) translate(300px, 10px);
border-radius: 35% 65% 48% 52% / 57% 68% 32% 43%;
}
.drop:nth-child(4) {
transform: scale(0.35) translate(120px, -350px);
border-radius: 50% 50% 52% 48% / 68% 36% 64% 32%;
}
'WEB animation & effect' 카테고리의 다른 글
| CSS , JS 디지털 시계 : setInterval(), new Date() (0) | 2021.10.01 |
|---|---|
| CSS 인스타그램 로고 (0) | 2021.10.01 |
| 로딩 애니메이션 : rotate circle (0) | 2021.09.29 |
| Water wave animation (0) | 2021.09.12 |
| glowing icon & text (0) | 2021.09.11 |