.circle{
width: 15px;
height: 15px;
background: rgba(0,0,0,0.7);
border-radius: 50%;
display: table-cell;
margin-right: 3px;
transition: all 0.5s ease;
}
.circle:hover{
background: #C7015C;
transform: scale(1.15);
}


或者
<div class='aniRotate'></div> .aniRotate{
animation:rotatePicture 0.5s 1;
animation-timing-function:ease;
/*animation-direction:alternate;*/
}
@keyframes rotatePicture {
0%{

transform: rotate(0deg) scale(1);
}
25%{
transform: rotate(-5deg) scale(1.2);
}
50%{
transform: rotate(0deg) scale(1);
}
75%{
transform: rotate(5deg) scale(1.2);
}
100%{
transform: rotate(0deg) scale(1);
}
}

轉載于:https://www.cnblogs.com/JimmyBright/p/7273830.html

總結

以上是生活随笔為你收集整理的记一个鼠标略过时候的css动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。