프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] Mouse Scroll Dwon

2021.03.08
북마크 작성자 정보
Mouse Scroll Down Effect
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION.CO.KR_5_243</title>
</head>
<style>
body {
margin: 0;
padding: 0;
background: #262626;
}

.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.down {
position: relative;
width: 50px;
height: 80px;
border-radius: 25px;
background: transparent;
border: 4px solid #fff;
overflow: hidden;
}
.down:before {
content: "";
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
left: 50%;
top: 10px;
transform: translate(-50%, 0);
animation: animate 1s linear infinite;
}
.down:after {
content: "";
position: absolute;
width: 6px;
height: 15px;
background: #fff;
left: 50%;
top: 5px;
transform: translate(-50%, 0);
border-radius: 3px;
}

@keyframes animate {
0% {
transform: translate(-50%, 20px);
}
80% {
transform: translate(-50%, 50px);
}
100% {
transform: translate(-50%, 60px);
}
}
</style>

<body>
<div class="center">
<div class="down"></div>
</div>
</body>
</html>

https://relation.co.kr/images_board/board_system_publishing/242/

 

이 포스트 공유하기

전체목록