CSS animation으로 놀기 - Attention-

15295 단어 CSSanimation
CSS animation day3이 되었습니다.
오늘은, 버튼으로 박동을 표현해, 주목을 모으는 디자인을 만들고 싶습니다.　

1. 완성판





2. 왜 Attention?　



이전의 기사 대로입니다만, Google material design 의 Fab 버튼을, 어떻게든 눈에 띄게 하고 싶습니다.　



참고 자료

이런 마이크로 인터랙션은 사용자 경험을 향상 시키네요, 디자인은 깊습니다. . . .　

3. 어떻게 할까?



여기 를 참고했습니다.

4. 분해해 보자



그럼 가자!　
우선, 중앙에 둥근 버튼을 만듭니다.



inde.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
    <style>
    </style>
</head>
<body>
    <div class="center">
        <div class="pulse">!</div>
    </div>
</body>
</html>

styles.css
body{
    margin: 0;
    padding: 0;
}

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

.pulse{
    width: 100px;
    height: 100px;
    background: skyblue;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    font-weight: bold;
    color: #fff;
}


다음이 포인트가 됩니다.　
버튼 주위의 파동을 표현하려면 어떻게 해야 할까요?　

···

그림자를 붙이는 프로퍼티를, 전방향으로 사용하면 좋다・・・

네, box shadow 속성입니다!　
　

MDN을 읽으면 box shadow의 네 번째 에 값을 설정하고 animation을 붙이면 좋을 것 같습니다!



styles.css
.pulse{
    width: 100px;
    height: 100px;
    background: skyblue;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    animation: pulsation 3s linear infinite;
}


@keyframes pulsation{
    0%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, .7)
      }
    40%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, .7)
       }
    80%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, .7)
       }
    100%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, .7)
       }
}


rgba의 투명도를 변경합시다.



styles.css
@keyframes pulsation{
    0%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, .7)
      }
    40%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, 0)
       }
    80%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, 0)
       }
    100%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, 0)
       }
}


마지막으로, keyframe 을 복수 설정해, 박동하고 있는 것 같은 표현을 붙입니다.



styles.css
@keyframes pulsation{
    0%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, .7), 0 0 0 0 rgba(225, 0, 178, .7)
      }
    40%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, 0), 0 0 0 0 rgba(225, 0, 178, .7)
       }
    80%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, 0), 0 0 0 30px rgba(225, 0, 178, 0)
       }
    100%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, 0),0 0 0 30px rgba(225, 0, 178, 0)
       }
}


spread radius 에 다른 값을 붙여 강약을 표현하는 것으로, 마치, 박동하고 있는 것처럼 보이네요. 매우 흥미로운 움직임입니다.

이러한 일견 복잡하게 보이는 표현도, 분해하는 것으로 알기 쉬워지네요.
그럼 또~
CSS animation에서 놀아 넘어뜨리다 - wave -
CSS animation으로 놀아 버리다- wave ver.2-

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage