【聊代码】第一0一集 css样式（之七十一）图片在缩放和变透明度的同时进行切换

聊代码（第九十集）css样式（之六十） 图片在缩放和变透明度的同时进行切换，请看下图效果。     代码： ＜div align="center"＞ ＜style type="text/css"＞.图{ width: 700px; height: 500px; position: absolute;top:800px; left:360px;z-index: 200; filter:contrast(120%)brightness(80%); -webkit-mask-image: radial-gradient(black 30% ,transparent 70%); animation: 动 24s infinite; opacity: 0;} @keyframes 动 {0% {opacity: 0; transform:translate(0%,0%)scale(0.5);} 50% {opacity: 1; transform:translate(0%,0%)scale(1.0);} 100% {opacity: 0.5; transform:translate(0%,0%)scale(0);} } img:nth-child(4) {animation-delay: 0s;} img:nth-child(3) {animation-delay: 6s;} img:nth-child(2) {animation-delay: 12s;} img:nth-child(1) {animation-delay: 18s;} ＜/style＞ ＜img class="图" src="http://image109.360doc.com/DownloadImg/2022/09/2011/252358576_1_20220920115918526.jpg" /＞ ＜img class="图" src="http://image109.360doc.com/DownloadImg/2022/09/2011/252358576_2_20220920115918807.jpg" /＞ ＜img class="图" src="http://image109.360doc.com/DownloadImg/2022/09/2011/252358576_3_2022092011591910.jpg" /＞ ＜/div＞

(注：您的设备不支持flash)

声明：以上内容仅用户个人行为，不代表本站（老小孩社区）观点，如有侵权或其他行为用户自己承担相关责任与本站无关。【举报文章】