[HTML]如何实现轮播图效果

ZJTT

已于 2022-06-10 10:43:12 修改

阅读量2w

点赞数 19

文章标签： html css3 css

于 2022-06-08 21:50:15 首次发布

本文链接：https://blog.csdn.net/dz1999/article/details/125192132

版权

这里来教大家怎设置轮播图效果，相信大家多少都知道大致原理，也许有些许疑点，下面我尽可能的给大家详解一下。

一、轮播盒子

//box是轮播时我们看到的内容
<div class="box">
//box1是放我们想要轮播图片或文字或...
    <div class="box1">
	    <div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

二、实现轮播

animation 动画
animation-name: ; 动画名字
animation-duration: ; 动画时间
animation-timing-function: ; 动画效果
animation-delay: ; 延迟时间
animation-iteration-count: ; 循环次数 infinite 无数次
animation-fill-mode: ; 最后停留位置
animation-play-state: ; 播放时暂停
animation 后可直接写想要的效果，首先是动画名字*/

/*设置box的大小*/
.box{
	    width: 400px;
		height: 225px;
		overflow: hidden;
		margin: 0 auto;
}
/*设置box1的大小（需要能够放下内容的大小）*/
.box1{
	    width: 1200px;
		animation:mybox 3s infinite ;
}
/*设置每个元素的大小。视为行内块，左浮动，可以使他们一排且无间隙*/
.box1 div{
		width: 400px;
		height: 225px;
		display: inline-block;
		float: left;
}

/*百分比大小可设置每个元素停留的时间*/
@keyframes mybox{
				0%{
					transform: translate(-0);
				}
                50%{
                    transform: translate(-400px);
                }   
				100%{
					transform: translate(-800px);
				}
			}
/*也可以直接写开始的位置和结束的位置*/
@keyframes mybox{
				from{
                    transform: translate(-0);
			}
                to{
                    transform: translate(-800px);
            }   
        }