1. 화살표
간단한 화살표 만의 패턴에서 흔히 볼 수있는 border지정한 요소를 transform: rotate(-45deg);이지 회전시킨 것입니다 CSS를 다음과 같이 설명합니다.
CSS
a {
padding-top: 60px;
}
a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
2. 화살표 × 서클
이곳은 방금 화살표 서클을 추가 한 것으로, CSS를 다음과 같이 설명합니다.
CSS
a {
padding-top: 60px;
}
a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
3. 화살표 × 원 × 파문
방금 전의 “화살표 × 서클”조금 움직임을 붙인 것으로, 파문이 확산 효과를 붙인 것입니다.
구현은 CSS를 다음과 같이 설명합니다.
CSS
a {
padding-top: 60px;
}
a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
-webkit-animation: sdb 3s infinite;
animation: sdb 3s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes sdb {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
4. 화살표 × 애니메이션 # 1
화살표에 일정 간격으로 위치가 아래에 조금 어긋나는 애니메이션을 더한 CSS를 다음과 같이 설명합니다.
CSS
a {
padding-top: 60px;
}
a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb 2s infinite;
animation: sdb 2s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
20% {
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
}
@keyframes sdb {
0% {
transform: rotate(-45deg) translate(0, 0);
}
20% {
transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
transform: rotate(-45deg) translate(0, 0);
}
}
5. 화살표 × 애니메이션 # 2
이곳은 위에서 아래로 화살표가 이동하면서 자연스럽게 사라질 것으로, CSS를 다음과 같이 설명합니다.
CSS
a {
padding-top: 70px;
}
a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb 1.5s infinite;
animation: sdb 1.5s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: rotate(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
@keyframes sdb {
0% {
transform: rotate(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotate(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
6. 화살표 × 애니메이션 # 3
이쪽도 앞서와 마찬가지로 화살표가 위에서 아래로 이동하면서 사라져가는 것입니다 만, 또한 빙글 빙글 회전하는 움직임을 붙인 것입니다.
구현은 CSS를 다음과 같이 설명합니다.
CSS
a {
padding-top: 70px;
}
a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
-webkit-animation: sdb 1.5s infinite;
animation: sdb 1.5s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb {
0% {
-webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
@keyframes sdb {
0% {
transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
7. 화살표 × 애니메이션 # 4
이곳은 여러 화살표를 사용하여 패턴의 것으로하고있는 것은 단지 각각의 위치를 이동 배치 한 화살표 표시 · 비 표시하고있다뿐입니다 만, animation-delay에서 시간을 늦추는 것으로 이러한 모양이됩니다.
이 구현에 관한 HTML은 지금까지의 것과는 조금 달리 HTML과 CSS 각각을 다음과 같이 설명합니다.
HTML
<a href="#"><span></span><span></span><span></span>Scroll</a>
CSS
a {
padding-top: 80px;
}
a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb 2s infinite;
animation: sdb 2s infinite;
opacity: 0;
box-sizing: border-box;
}
a span:nth-of-type(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
a span:nth-of-type(2) {
top: 16px;
-webkit-animation-delay: .15s;
animation-delay: .15s;
}
a span:nth-of-type(3) {
top: 32px;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
@-webkit-keyframes sdb {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes sdb {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
8. 마우스
화살표 이외의 것이라고 스크롤 버튼으로 배치되어있는 것을 아래 보이는 경우가 많다 마우스를 구현하고 본 것으로 CSS를 다음과 같이 설명합니다.
CSS
a {
padding-top: 60px;
}
a span {
position: absolute;
top: 0;
left: 50%;
width: 30px;
height: 50px;
margin-left: -15px;
border: 2px solid #fff;
border-radius: 50px;
box-sizing: border-box;
}
a span::before {
position: absolute;
top: 10px;
left: 50%;
content: '';
width: 6px;
height: 6px;
margin-left: -3px;
background-color: #fff;
border-radius: 100%;
box-sizing: border-box;
}
9. 마우스 × 화살표
이곳은 방금 마우스 아래에 화살표를 추가 한 것으로, 구현은 CSS를 다음과 같이 설명합니다.
CSS
a {
padding-top: 80px;
}
a span {
position: absolute;
top: 0;
left: 50%;
width: 30px;
height: 50px;
margin-left: -15px;
border: 2px solid #fff;
border-radius: 50px;
box-sizing: border-box;
}
a span::before {
position: absolute;
top: 10px;
left: 50%;
content: '';
width: 6px;
height: 6px;
margin-left: -3px;
background-color: #fff;
border-radius: 100%;
box-sizing: border-box;
}
a span::after {
position: absolute;
bottom: -18px;
left: 50%;
width: 18px;
height: 18px;
content: '';
margin-left: -9px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
10. 마우스 × 애니메이션
이곳은 마우스 스크롤을 격려하는 애니메이션을 더해 보면 한 것으로, 구현은 CSS를 다음과 같이 설명합니다.
CSS
a {
padding-top: 60px;
}
a span {
position: absolute;
top: 0;
left: 50%;
width: 30px;
height: 50px;
margin-left: -15px;
border: 2px solid #fff;
border-radius: 50px;
box-sizing: border-box;
}
a span::before {
position: absolute;
top: 10px;
left: 50%;
content: '';
width: 6px;
height: 6px;
margin-left: -3px;
background-color: #fff;
border-radius: 100%;
-webkit-animation: sdb 2s infinite;
animation: sdb 2s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb {
0% {
-webkit-transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
-webkit-transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes sdb {
0% {
transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}
