[散修弟子]JS-2011|2019年09月10日的日报-技能树.IT修真院

发表于： 2019-09-10 23:59:32

2 801

一、今日完成任务

1. 任务目标——任务5；

2. 完成进度：30%；

3. 目前实现，个人主页的上半部分，以及图片自动轮播功能；

4. 效果呈现：

5. 代码呈现：

html：

      <article class="top_half">
        <section class="bg_img">
          <div class="img1"></div>
          <div class="img2"></div>
          <div class="img3"></div>
        </section>

CSS：

.top_half {
    position: relative;
    overflow: hidden;

    width: 100%;
    height: 16.4em;
}
.bg_img {
    position: absolute;
    display: flex;

    width: 300%;
    height: 16.4em;
} /* 为使图片轮播，采用包含块移动时带图片移动，由此包含块宽度为图片的三倍，且溢出部分隐藏 */

.img1 {
    width: 33.3%;
    height: 100%;

    background: url(../personal-page/img/bg1@2x.png) no-repeat;
    background-size: cover;
}
.img2 {
    width: 33.4%;
    height: 100%;

    background: url(../personal-page/img/bg2@2x.png) no-repeat;
    background-size: cover;
}
.img3 {
    width: 33.3%;
    height: 100%;

    background: url(../personal-page/img/bg1@2x.png) no-repeat;
    background-size: cover;
} /* 赋予上半部分的背景图片，及轮播时各图片的尺寸为包含块的三分之一，img3为img1的图片 */

@keyframes move {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-33.3%);
    }
    100% {
        transform: translateX(-66.7%);
    }
} /* 声明一个关键帧动画move，时间的0%处为img1，50%时移动为img2，100%时移动为img3即img1，如此循环，只有开始阶段跟结束阶段都是同一张图片，即可做到无缝循环播放 */
.bg_img {
    -webkit-animation:  move 5s  ease-in-out infinite;
    -moz-animation:  move 5s  ease-in-out infinite;
    -ms-animation:  move 5s  ease-in-out infinite;
    -o-animation:  move 5s  ease-in-out infinite;
    animation: move 5s ease-in-out infinite;
} /* 给包含块定义动画属性，从左到右的属性为：
应用关键帧动画move，动画总时长为5s，动画的缓动效果为渐进渐出(ease-in-out)，infinite为循环播放 */
.bg_img:hover {
    animation-play-state: paused;
} /* 悬浮时，动画效果停止 */