[郑州|结业弟子]JS-王敏宇|2021年02月25日的日报-技能树.IT修真院

发表于： 2021-02-25 19:59:47

2 961

今天完成的事情：做完了任务十三的两个界面

明天计划的事情：昨晚任务十三和十四

收获：

如何用CSS实现轮播图效果？

使用animation动画属性

animation的常用属性有

animation-name 指定要绑定到选择器的关键帧的名称

animation-duration 动画指定需要多少秒或毫秒完成

animation-timing-function 设置动画将如何完成一个周期

常用为linear 匀速播放

animation-delay 设置动画在启动前的延迟间隔。

animation-iteration-count 定义动画的播放次数。

常用为infinite无限循环播放

HTML部分：

<body>
    <div class="homepage">

        <div class="carousel">

            <div class="carousel-set">

                <div class="carousel-content"><!-- 每一块的内容 -->
                    <img src="5.jpg">
                </div>
                
                <div class="carousel-content"><!-- 每一块的内容 -->
                    <img src="5.jpg">
                </div>

                <div class="carousel-content"><!-- 每一块的内容 -->
                    <img src="5.jpg">
                </div>

                <div class="carousel-content"><!-- 每一块的内容 -->
                    <img src="5.jpg">
                </div>

            </div>
        </div>

    </div>

</body>

CSS部分：

.homepage {
    width: 100%;
}

.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-set {
    animation: playMovie 10s linear infinite;
    width: 400%;
}

.carousel-content {
    float: left;
    width: 25%;
}

.carousel-content > img {
    width: 100%;
    height: 100%;
}

@keyframes playMovie {
    0% {margin-left: 0;}
    10% {margin-left: 0;}
    20% {margin-left: -50%;}
    30% {margin-left: -100%;}
    40% {margin-left: -100%;}
    50% {margin-left: -150%;}
    60% {margin-left: -200%;}
    70% {margin-left: -200%;}
    80% {margin-left: -250%;}
    90% {margin-left: -300%;}
    100% {margin-left: -300%;}
}