今天又收获了一个很好的小图标左右滚动的动画。即鼠标移动上去小图标左右滚动,如下。
实现步骤如下:
1.先自定义一个帧动画,如下
@-moz-keyframes swing {
20%, 40%, 60%, 80%, 100% {
transform-origin: center top 0;
}
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
2.然后鼠标移上去的时候,
改变css属性
.nav li:hover i{animation:1s ease 0.2s normal both 1 swing;}
很炫的一个效果有木有