css3 |
您所在的位置：网站首页 › css动画无限循环 › css3 |
css3
|
在线演示 鼠标悬停，图标会一直不停旋转。 如果实现图标一直不停旋转，则需要使用animation动画。先制作动画的各个关键帧，然后在图标中运用这一动画。 图标文件引入： html： css： .close { cursor: pointer; display: inline-block; width: 100px; height: 100px; border-radius: 50%; background-color: #96CEB4; position: relative; } i { color: #FFEEAD; font-size: 48px; position: absolute; top: 8%; left: 19%; } /*定义动画*/ @-webkit-keyframes spin { /*兼容性写法。spin是关键帧的动画名称*/ from { /*动画起始状态*/ -webkit-transform: rotate(0deg); } to { /*动画结束状态*/ -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .close:hover i { -webkit-animation: spin 1s linear infinite;/*鼠标hover时，i图标旋转,infinite表示动画无限循环*/ animation: spin 1s linear infinite; }解析： keyframes：定义一个名为spin的关键帧动画。 from：指定动画的起始状态 to：指定动画的结束状态。 linear：动画匀速运动 infinite：表示动画无限循环 如果想让动画执行2次： .close:hover i { -webkit-animation: spin 1s linear 2;/*2代表动画执行2次*/ animation: spin 1s linear 2; }如果想让两次动画之间有延迟（比如一次动画结束，停留2秒再次执行动画，并且执行2次）： .close:hover i { -webkit-animation: spin 1s linear 2s 2; /*2s代表延迟2秒 2代表动画执行2次*/ animation: spin 1s linear 2s 2; }还可以反向旋转（alternate表示偶数次数反向播放动画，如下代码是顺时针旋转一次后，再逆时针旋转一次）： .close:hover i { -webkit-animation: spin 1s linear 2s 2 alternate; /*2s代表延迟2秒 2代表动画执行2次*/ animation: spin 1s linear 2s 2 alternate; } |
【本文地址】
今日新闻 |
推荐新闻 |