반응형
css의 animation을 사용하여 위 사진처럼 깜빡이는 버튼을 만드는 방법입니다.
코드는 아래와 같이 사용 해 주시고 변경하고자하는 부분은 수정해서 사용 해 주세요.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
button{
border: none;
width: 10%;
height: 60px;
font-size: 24px;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
}
.blink {
animation: blink .6s step-end infinite alternate;
}
@keyframes blink {
0% { background-color:#fff961; color: #2d2d2d;}
50% {background-color:#fe3023; color: #fff;}
}
</style>
</head>
<body>
<button class="blink" type="submit">버튼</button>
</body>
</html>
추가로 ' animation: blink .6s step-end infinite alternate;' 코드를 풀어 쓸 경우 아래와 같습니다.
animation-name: blink;
_애니메이션 이름을 blink로 지정.
animation-duration: 0.6s;
_애니메이션 동작 시간 6초로 지정.
animation-timing-function: step-end;
_중간 상태들의 전환을 종료시점에 진행하도록 지정.
animation-iteration-count: infinite;
_애니메이션 재생 횟수를 무한반복으로 지정.
animation-direction: alternate;
_애니메이션이 종료되면 다시 번갈아 나오도록 지정.
animation을 사용하여 간추려 코드를 작성할 경우 꼭 정해진 순서대로 작성을 해 줘야하니 참고 해 주세요.
반응형