纯纯css如何hover之后变成动态图标呢

html-css018

纯纯css如何hover之后变成动态图标呢,第1张

今天学习一个炫酷的小技能，纯纯css实现动态图标，hover之后静止在某一个图标。

Demo效果如下：

到这里我们的 HTML 文件就全部写完啦

这时候我们就可以得到一个图片的效果。

这里小图标总共有 11 张，相互之间的变化就是 10 步，所以动画设置如下

这样就得到了一个无限循环的逐帧动画

这样下来，默认就不会动了，然后在hover的时候“运行”就行了

一、实现CSS3无限循环动画代码示例。

代码如下：

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg)

border:5px solid red

}

50%{

-webkit-transform: rotate(180deg)

background:black

border:5px solid yellow

}

100%{

-webkit-transform: rotate(360deg)

background:white

border:5px solid red

}

}

.loading{

border:5px solid black

border-radius:40px

width: 28px

height: 188px

-webkit-animation:gogogo 2s infinite linear

margin:100px

}

扩展资料

实现动画无限循环所需要的CSS属性说明：

1、infinite

在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction

2、animation-name

规定需要绑定到选择器的 keyframe 名称。

3、animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

4、animation-timing-function

规定动画的速度曲线。

5、animation-delay

规定在动画开始之前的延迟。

6、animation-iteration-count

规定动画应该播放的次数。

7、animation-direction

规定是否应该轮流反向播放动画。

transition使用

为鼠标指针的滑过状态设置一些动画效果。图标在1秒内匀速旋转360度。

.close:hover::before{

-webkit-transform:rotate(360deg)

transform:rotate(360deg)

-webkit-transition:-webkit-transform 1s linear

transition:transform 1s linear

}