[구현]
크게 4개의 영역으로 구분한뒤에 구현 할 수 있다.
[HTML]
<body>
<div class="container display-center">
<div class="insta display-center">
<div class="insta-inner display-center">
<div class="insta-inner2"></div>
</div>
</div>
<h1>Instagram</h1>
</div>
</body>[css]
@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@300;400;500;600;700;800;900&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Bitter", serif;
}
/* 가운데 정렬을 위함 */
.display-center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 100%;
height: 100vh;
background-color: #091836;
}
.container h1 {
margin-left: 50px;
color: #fff;
font-size: 100px;
font-weight: 500;
}
/* === LOGO background === */
.insta {
width: 270px;
height: 270px;
/* insta-logo background color */
background: radial-gradient(
circle at 33% 100%,
#fed373 4%,
#f15245 30%,
#d92e7f 62%,
#9b36b7 85%,
#515ecf
);
border-radius: 54px;
}
/* === LOGO inner white square === */
.insta-inner {
position: relative;
width: 200px;
height: 200px;
border: 18px solid #fff;
border-radius: 54px;
}
/* === LOGO inner little circle === */
.insta-inner::after {
content: "";
position: absolute;
top: 15px;
right: 15px;
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
}
/* === LOGO inner white square2 === */
.insta-inner2 {
width: 100px;
height: 100px;
border: 18px solid #fff;
border-radius: 50%;
}
'WEB animation & effect' 카테고리의 다른 글
| SVG 아이콘 애니메이션 (0) | 2021.10.07 |
|---|---|
| CSS , JS 디지털 시계 : setInterval(), new Date() (0) | 2021.10.01 |
| CSS 물방울 효과 (0) | 2021.09.29 |
| 로딩 애니메이션 : rotate circle (0) | 2021.09.29 |
| Water wave animation (0) | 2021.09.12 |