css 마우스오버시에 둥둥 뜨는 아이콘 transform, box-shadow animation

 

 

 

간단한 마우스 오버 애니메이션을 소개합니다.

영역에 마우스가 오버가 되면 아래의 그림과 같이 

둥둥 뜨는듯하면서 그림자가 퍼지는 듯한 애니메이션입니다.

 

 

HTML 코드입니다.

circle-box 영역에 마우스가 오버가 되면

ICON에 애니메이션이 발동됩니다.

 

<div class="container">
    <div class="circle-box">
        <div class="circle"><span>ICON</span></div>
    </div>
</div>

 

CSS 코드입니다.

animation : circlemove 1.5s infinite linear;

 

(circlemove의 속성대로 1.5초동안 애니메이션이 발동되고

무한루프로 속도는 일정하게)

 

html,body {width:100%;height:100%;margin:0px;padding:0px;font-family:sans-serif;}
.container{width:100%;height:100%;background:#000;}

.circle, .circle span, .circle-box{
    position:absolute;display:block;
    left:50%;transform:translate(-50%,-50%);
}
.circle-box{
    top:50%;
    width:300px;height:400px;background:#333;
    cursor:pointer;
}
.circle{
    top:40%;
    width:150px;height:150px;
    border-radius:50%;
    background:yellow;
    box-shadow: 0 0 15px rgba(221, 224, 11, 1);
}
.circle span{
    top:50%;
    font-size:2em;
    font-weight: bold;
    font-family: Arial, sans-serif;
}
.circle-box:hover > .circle{
    animation:circlemove 1.5s infinite linear;
}

@keyframes circlemove{
    0%,100%{
        transform:translate(-50%,-50%);
    }
    50%{
        transform:translate(-50%,-60%);
        box-shadow: 0 0 30px rgba(221, 224, 11, 1);
    }
}