多语言展示
当前在线:1030今日阅读:39今日分享:10

GIF动态图教学-CSS3语言20-隐藏动画细节(实例)

方法/步骤
1

首先创建一个div标记和h1标记,如图操作。

2

添加伪元素:hover,鼠标停留时,属性是瞬间变化的,如图所示。

3

添加动画,让属性有个变化过程,如图操作。

4

使用opacity隐藏属性,发现动画正常播放,如图操作。

5

然而使用display隐藏属性,是没有动画的。

6

最后使用visibility隐藏属性,如图操作,是有动画的。

7

单独使用visibility隐藏属性,发现一开始没有动画,但是鼠标移出时有个结束动画,测试页面,如图操作。

推荐信息