【聊代码】第一0 0 集 css样式（之七十）利用不透明度的改变

聊代码（第九十集）css样式（之六十）       利用透明度的变化切换图片，请看下图效果。

代码：

＜style type="text/css"＞

.动画{position: relative; }

@keyframes 动 {

0%{ opacity: 0; }

50%{ opacity: 1; }

100%{ opacity: 0; } }

.图1{ width: 280px; height: 620px; }

.图2{ width: 280px; height: 620px; position: absolute; left: 35%; top: 0; animation: 动 8s ease-in-out infinite;}

＜/style＞

＜div class="动画"＞

＜img class="图1" src="//image109.360doc.com/DownloadImg/2022/09/2000/252337908_1_20220920120108479.jpg" /＞

＜img class="图2" src="//image109.360doc.com/DownloadImg/2022/09/2000/252337908_2_20220920120108746.jpg" /＞

＜/div＞ ＜/div＞

代码解析：

对图1只规定了宽高，图1不会有任何变化。见代码 .图1{ width: 280px; height: 620px; } 。

对图2作了以下规定：

①与图1同宽高。见代码： width: 280px; height: 620px; 。

②绝对定位，使之与图1重合，将图1完全覆盖。见代码 position: absolute; left: 35%; top: 0; 。

③规定了过渡时间，过渡形式，动画次数（循环播放）。见代码： animation: 动 8s ease-in-out infinite; 。