CSS实现透明度变化的动画 (淡入淡出效果)
发布日期:2021-06-21 05:17:40 浏览次数:4 分类:技术文章

本文共 2142 字,大约阅读时间需要 7 分钟。

  • 本文我们将使用CSS来实现透明度发生变化的动画,可以获得淡入和淡出效果。
  • 要实现CSS中透明度更改的动画,需要使用的是transition属性。由于transition属性是CSS3中的新增属性,因此有必要在一些可支持的浏览器上运行时加上前缀。
  • 像是Chrom,Safari编写为“-webkit-transition”,为FireFox编写“-moz-transition”,为Internet Explorer编写“-ms-transition”,为Opera编写“-o-transition”;如果它是最新的Web浏览器(Internet Explorer 11,Microsoft Edge),则直接使用“transition”属性而不需要加上前缀。

语法:

1

transition: all [变化时间];

  • 对于[变化时间],指定动画更改的时间
  • 例子:
  • 以下示例是在3秒内动画。

1

transition: all 3s;

代码实例如下:

创建以下HTML文件。

fade.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link rel="stylesheet" href="fade.css" />

<meta charset="utf-8" />

    <script type="text/javascript">

        function FadeOutLinkClick() {

                    var frame = document.getElementById("FadeOutDivFrame");

            frame.className = "FadeOutFrame fadeout";

        }       

        function FadeInLinkClick() {         

        var frame = document.getElementById("FadeInDivFrame");

          frame.className = "FadeInFrame fadein";

        }   

        </script>

        </head>

        <body>

  <div id="FadeOutDivFrame" class="FadeOutFrame">按钮。</div>

  <a id="fadeout" href="javascript:void(0);" onclick="FadeOutLinkClick();">淡出</a>

  <hr/>

  <div id="FadeInDivFrame" class="FadeInFrame">框架。</div>

  <a id="fadeout" href="javascript:void(0);" onclick="FadeInLinkClick();">淡入</a>

  </body>

  </html>

fade.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

.FadeOutFrame {

    width: 320px;   

    height: 180px;   

    background-color: #abffe8;   

    border: 1px solid #0067aa;   

    opacity: 1;

}

.FadeOutFrame.fadeout{

  -webkit-transition: all 1.5s; 

  -moz-transition: all 1.5s; 

  -ms-transition: all 1.5s; 

  -o-transition: all 1.5s; 

  transition: all 1.5s; 

  opacity: 0;

}

.FadeInFrame {

    width: 320px;   

    height: 180px;   

    background-color: #ffd3d3;   

    border: 1px solid #b50042;   

    opacity: 0;

}

.FadeInFrame.fadein{

  -webkit-transition: all 1.5s; 

  -moz-transition: all 1.5s; 

  -ms-transition: all 1.5s; 

  -o-transition: all 1.5s; 

  transition: all 1.5s; 

  opacity: 1;

}

说明:点击“淡出”链接时,将“FadeOutDivFrame”框的类别从“FadeOutFrame”更改为“FadeOutFrame fadeout”,“FadeOutFrame fadeout”设置了transition属性和opacity: 0;,因为transition属性和opacity: 0;已经设置了,所以就淡出为透明动画。

效果如下:

GIF.gif

本篇文章到这里就全部结束了。

转载地址:https://blog.csdn.net/lin123_00/article/details/105848625 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:css为什么要清除浮动?浮动如何清除
下一篇:input标签是什么?input标签属性有哪些

发表评论

最新留言

逛到本站,mark一下
[***.202.152.39]2024年04月17日 01时04分10秒