【聊代码】第一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="http://image109.360doc.com/DownloadImg/2022/09/2000/252337908_1_20220920120108479.jpg" /＞ ＜img class="图2" src="http://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; 。