CSS实现透明度变化的动画（淡入淡出效果）

小灰灰 2021-01-30 16:49 989阅读 0赞

*  **本文我们将使用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”属性而不需要加上前缀。**

**语法：**
````
transition: all [变化时间];
````
 *  对于\[变化时间\]，指定动画更改的时间
 *  例子：
 *  以下示例是在3秒内动画。

````
transition: all 3s;
````
代码实例如下：

创建以下HTML文件。

fade.html

````
<!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
````
.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][]

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

[GIF.gif]: /images/1612025330864.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，989人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 图片淡入淡出效果

html源码： css源码： .fadeImg \{ width: 100px; height: 100px; background: red; \-we

客官°小女子只卖身不卖艺/ 2023年01月16日 09:51/ 0 赞/ 87 阅读

相关 CSS - 呼吸灯效果动画（淡隐淡出效果）

效果图 > 只是简单的呼吸效果，您按照需求自己拓展即可。 ![在这里插入图片描述][20201128125739868.gif_pic_cener] 代码

喜欢ヅ旅行/ 2022年12月24日 12:55/ 0 赞/ 74 阅读

相关 Dotween 淡入淡出循环效果

最重要的一代码：物体.GetComponent<Renderer>().material.DOFade(1,1).SetLoops(-1,LoopType.Yoyo); 获

深碍√TFBOYSˉ_/ 2022年06月15日 04:19/ 0 赞/ 812 阅读

相关图片的效果（淡入淡出。。。。。。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2022年06月07日 05:20/ 0 赞/ 203 阅读

相关 CSS3原生实现淡入淡出效果

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta n

太过爱你忘了你带给我的痛/ 2022年05月23日 07:28/ 0 赞/ 213 阅读

相关 jQuery动画效果——淡入淡出

-------------------- 任务描述本关任务：掌握jQuery常见的动画效果——淡入淡出。效果图如下： ![206413][] 相关知识为了完成本关

桃扇骨/ 2022年04月05日 13:20/ 0 赞/ 273 阅读

相关网站页面的淡入淡出效果

在head部分加入一下内容： <META http-equiv=Page-Enter content=blendTrans(Duration=0.3)> <META h

╰半夏微凉°/ 2022年01月05日 14:21/ 0 赞/ 242 阅读

相关 Jquery------淡入淡出效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>淡入淡

今天药忘吃喽~/ 2021年12月10日 10:04/ 0 赞/ 303 阅读

相关 jQuery 效果 - 淡入淡出滑动的方法

jQuery Fading 方法通过 jQuery，您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法： fadeIn() 淡入

小鱼儿/ 2021年09月15日 07:38/ 0 赞/ 296 阅读

相关 CSS实现透明度变化的动画（淡入淡出效果）

本文我们将使用CSS来实现透明度发生变化的动画，可以获得淡入和淡出效果。要实现CSS中透明度更改的动画，需要使用的是transition属性。由于transition属...

小灰灰/ 2021年01月30日 16:49/ 0 赞/ 990 阅读