CSS是前端开发中很重要的一环,其中图片轮播也是很常见的功能。接下来将介绍两个使用CSS实现图片轮播的代码。//第一种轮播代码 .slider { width: 300px; height: 200p
CSS是前端开发中很重要的一环,其中图片轮播也是很常见的功能。接下来将介绍两个使用CSS实现图片轮播的代码。
//第一种轮播代码 .slider { width: 300px; height: 200px; overflow: hidden; } .slider img { width: 300px; height: 200px; float: left; } .slider-inner { position: relative; width: 600px; height: 200px; animation: change 4s infinite; } .slider-inner img { float: left; } @keyframes change { 0% { left: 0px; } 25%{ left: -300px; } 50% { left: -300px; } 75%{ left: -600px; } 100% { left: -600px; } } //第二种轮播代码 .slider { width: 300px; height: 200px; overflow: hidden; position: relative; } .slider img { width: 300px; height: 200px; position: absolute; left: 0; transition: opacity 1s ease-in; } .slider img:nth-child(2) { opacity: 0; } .slider:hover img:nth-child(2) { opacity: 1; z-index: 1; }
第一种代码中,通过设置外层盒子的宽度和高度,以及overflow:hidden属性实现图片的裁剪。通过使用float: left属性,让所有图片都排列在一行,然后利用CSS3的animation属性实现轮播效果。
第二种代码中,通过设置图片的position为absolute,让所有图片都重叠起来,然后通过将第一张和第二张图片设置不同的opacity值,实现鼠标悬停时的轮播效果。
粉丝
0
关注
0
收藏
0