css能实现自动更换图片吗
css能实现自动更换图片,具体的做法是为每一张图片创建一个animation动画,设置不同的duration持续时间,再通过keyframes实现不透明度的变化,来实现更换图片的效果。
具体实现代码如下:(相关课程推荐:css视频教程)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html { width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; } #center { display: flex; justify-content: center; align-items: center; } .iamge2, .iamge3, .iamge4 { opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } @keyframes cf4FadeInOut { 0% { opacity: 1; } 100% { opacity: 0; } } #cf4a { position: relative; height: 280px; width: 450px; margin: 0 auto; overflow-x: hidden; border: 1px solid #ccc; background: #ccc } .iamge1 { animation-name: cf4FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 1s; animation-direction: alternate; } .iamge2 { animation-name: cf4FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 2.5s; animation-direction: alternate; } .iamge3 { animation-name: cf4FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 4.5s; animation-direction: alternate; } .iamge4 { animation-name: cf4FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 6s; animation-direction: alternate; } </style> <title>animate demo</title> </head> <body id="center"> <div id="cf4a"> <img class="iamge1" src="html1.jpg" /> <img class="iamge2" src="css-4.jpg" /> <img class="iamge3" src="css3.jpg" /> <img class="iamge4" src="js2.jpg" /> </div> </body> </html>
效果:
© 著作权归作者所有
举报
发表评论
0/200