使用@keyframes做出轮播图效果

如何使用@keyframes做出轮播图效果呢1.首先我们需要一个盒子,宽度设置成三张图的大小,高度设置成图片的高度<style>.box{width: 600px;height: 200px;border: 3px solid black;margin: 100px auto;}</style><body>..

qq_32288819

1960人浏览 · 2022-05-12 23:00:47

qq_32288819 · 2022-05-12 23:00:47 发布

如何使用@keyframes做出轮播图效果呢

1.首先我们需要一个盒子,宽度设置成三张图的大小,高度设置成图片的高度

<style>
        .box{
            width: 600px;
            height: 200px;
            border: 3px solid black;
            margin: 100px auto;
        }
</style>

<body>
    <div class="box"></div>
</body>

2. 给盒子加上border边框,用外边距margin将盒子水平居中,做出这样的效果

3. 紧接着我们需要一个大盒子将我们的所有图片装起来,我们给box盒子里加上ul>li>a,这里li的个数取决于你图片的个数.

<div class="box">
        <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>

4. 我们在a标签中插入我们要用到的图片

<ul>
            <li><a href="#">
                    <img src="../images/1.jpg" alt="">
                </a></li>
            <li><a href="#">
                    <img src="../images/2.jpg" alt="">
                </a></li>
            <li><a href="#">
                    <img src="../images/3.jpg" alt="">
                </a></li>
            <li><a href="#">
                    <img src="../images/4.jpg" alt="">
                </a></li>
            <li><a href="#">
                    <img src="../images/5.jpg" alt="">
                </a></li>
            <li><a href="#">
                    <img src="../images/6.jpg" alt="">
                </a></li>
            <li><a href="#">
                    <img src="../images/7.jpg" alt="">
                </a></li>
        </ul>

5. 然后我们再给ul设置list-style-type: none删除小圆点就得到了这样的效果(记得用通配符去除内外边距)

6.再给ul里的li设置浮动让他依次水平排列就得到了这样的效果

.box ul li{
            float: left;
        }

7. 图片没有依次排列是因为ul的宽度继承了父元素的宽度只能放入三张图,我们需要给ul设置能够放入所有图片的宽度(1400取决于你图片宽度的总和)

.box ul{
            width: 1400px;
            list-style-type: none;
        }

设置好宽度后就可以得到这样的效果

8.而要做到轮播图的效果,就是拉动ul这个盒子X轴向有移动,盒子带动图片移动.我们需要使用@keyframes定义一个动画

@keyframes move{
            100%{
                transform: translateX(-1400px);
            }
        }

move就是这个动画的名字,transform:translateX表示元素在X轴上移动,向右为正值,向左则为负值.

定义好后我们需要使用animation调用这个动画,move表示要调用的动画名字,2s表示动画时长,linear表示匀速.

.box ul{
            width: 1400px;
            list-style-type: none;
            animation: move 2s linear;
        }

9.调用好后就能实现拉动盒子的效果,轮播图的效果也就有了

10,我们再给.box盒子设置overflow:hidden溢出隐藏就可以隐藏盒子外的图片

.box {
            overflow: hidden;
            width: 600px;
            height: 200px;
            border: 3px solid black;
            margin: 100px auto;
        }

设置好后就有了轮播图的效果