css实现动态效果

个人头像悬停特效

效果图:

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .img {
      width: 150px;
      height: 150px;
      margin: 100px auto;
      background: lightcoral;
      border-radius: 50%;
    }

    .img img {
      width: 100%;
      border-radius: 50%;
      transform: scale(1);
      transition: all 1s;

    }

    .img:hover img {
      transform: scale(0.7);
      box-shadow: 0 0 0 15px white;
    }
  </style>
</head>

<body>
  <div class="img">
    <img src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg" alt="" />
  </div>
</body>

</html>

文字遮罩动态效果

样式一:

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .container{
            width: 500px;
            height: auto;
            margin: 100px auto;
            position: relative;
        }
        .container img{
            width: 100%;
            height: auto;
            display: block;
            transform: scale(1);
            transition: transform 1.5s;
        }
        .container:hover img{
            transform: scale(0);
        }
        .container .content{
            width: 100%;
            height: 100%;
            background: gray;
            padding: 20px;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            color: white;
            transform: scale(0) rotate(-180deg);
            transition: transform 0.5s;
            /* transition-delay: 0.5s; */
        }
        .container:hover .content{
            transform: scale(1) rotate(0);
        }
        .content .title{
            border-bottom: 1px solid black;
            padding-bottom: 10px;
        }
        .content .text{
            font-style: italic;
        }
        .content .btn{
            display: block;
            padding: 0 auto;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://ae01.alicdn.com/kf/Uc32240fb1b134adc8b256577bd78b9a3j.jpg" alt="">
        <div class="content">
            <h2 class="title">小康博客</h2>
            <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum harum quibusdam illo nisi amet? </p>
            <button  class="btn">Read More</button>
        </div>
    </div>
</body>
</html>

样式二:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            width: 500px;
            height: auto;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .container img {
            width: 100%;
            height: auto;
            display: block;
        }

        .container .content {
            width: 100%;
            height: 100%;
            background: gray;
            padding: 20px;
            position: absolute;
            left: 0px;
            top: 0;
            text-align: center;
            color: white;
            /* 遮罩的初始位置应该是原位置旋转90°之后  结束位置应该以右下角旋转*/
            transform-origin: 100% 100%;
            transform: rotate(90deg);
            /* 过渡1s,也就是鼠标离开时的过渡 */
            transition: transform 1s;
        }

        .container:hover .content {
            /* 偏移位置应该是以左上角 */
            transform-origin: top left;
            transform: rotate(0deg);
            transition: transform 1s;
        }

        .content .title {
            border-bottom: 1px solid black;
            padding-bottom: 10px;
        }

        .content .text {
            font-style: italic;
        }

        .content .btn {
            display: block;
            padding: 0 auto;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="https://ae01.alicdn.com/kf/Uc32240fb1b134adc8b256577bd78b9a3j.jpg" alt="" />
        <div class="content">
            <h2 class="title">小康博客</h2>
            <p class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum harum
                quibusdam illo nisi amet?
            </p>
            <button class="btn">Read More</button>
        </div>
    </div>
</body>

</html>

列表目录悬停特效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表目录动态效果</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            background-color: #713DF2;
        }

        .container {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            position: relative;
        }

        .container .menu {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .container .menu li {
            width: 100%;
            height: 70px;
            padding-left: 30px;
            background-color: white;
            line-height: 70px;
            font-size: 18px;
            border-top: 1px solid lightgray;

        }

        .menu li:first-child {
            border: 0;
        }

        .checked {
            width: 110%;
            height: 70px;
            position: absolute;
            top: 0;
            left: -5%;
            background-color: #39A5F7;
            box-shadow: 0 0.3rem 0.2rem rgba(0, 0, 0, 0.3);
            transition: top 0.5s;
            z-index: 1;
            overflow: hidden;
        }

        .checked .menu {
            width: 300px;
            height: 70px;
            position: absolute;
            transition: top 0.8s;
            left: 15px;
        }

        .checked .menu li {
            background: transparent;
            border-top: none;
            color: white;

        }
        .hover{
            width: 100%;
            height: 70px;
            position: absolute;
            z-index: 2;
        }
        .hover1{
            top: 0;

        }
        .hover1:hover~.checked{
            top: 0;
        }
        .hover1:hover~.checked .menu{
            top: 0;
        }

        .hover2{
            top:70px;
        }
        .hover2:hover~.checked{
            top: 70px;
        }
        .hover2:hover~.checked .menu{
            top: -70px;
        }

        .hover3{
            top: 140px;
        }
        .hover3:hover~.checked{
            top: 140px;
        }
        .hover3:hover~.checked .menu{
            top: -140px;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="menu">
            <li>HTML5与CSS3基础语法</li>
            <li>CSS3核心技术与新特性</li>
            <li>JavaScript基础语法</li>
        </ul>
        <!-- 用来代表原本菜单中的三个选项(li元素) -->
        <div class="hover hover1"></div>
        <div class="hover hover2"></div>
        <div class="hover hover3"></div>
        <div class="checked">
            <ul class="menu">
                <li>HTML5与CSS3基础语法</li>
                <li>CSS3核心技术与新特性</li>
                <li>JavaScript基础语法</li>
            </ul>
        </div>
    </div>

</body>

</html>

卡片悬停效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 900px;
            margin: 0 auto;
        }

        .container ul {
            width: 900px;
            margin: 0 auto;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .container ul li {
            float: left;
            width: 200px;
            height: 355px;
            margin-left: 20px;
            position: relative;
            overflow: hidden;
        }

        .container ul li img {
            width: 200px;
            transition: all 1s;
        }

        .container ul .two img {
            width: 200px;
            transition: all 1s;
            transform: scale(1.2);
        }
        .container ul .three img {
            width: 200px;
            transition: all 1s;
            transform: scale(1.2);
        }

        .container ul li .mast {
            width: 200px;
            height: 300px;
            background-color: rgba(0, 0, 0, 0);
            text-align: center;
            position: absolute;
            top: 250px;
            padding-top: 50px;
            transform: scale(1);
            transition: all 1s;
            z-index: 100;
            color: white;
        }
        .container ul li .mast p{
            padding-bottom: 30px;
        }
        .container ul li .mast .title{
            font-weight: bold;
        }
        .container ul li .mast .desc{

            font-style: italic;
        }
        .container ul li .mast:hover {
            top: 0;
            background-color: rgba(0, 0, 0, .1);
        }
        .container ul li .mast:hover+img {
            transform: scale(1.2);
        }
        .container ul .two .mast:hover+img {
            margin-top: -10px;
        }
        .container ul .three .mast:hover+img {
            transform: scale(1);
        }
        /* 按钮 */
        .btn{
            display: block;
            width: 90px;
            height: 50px;
            margin: 0 auto;
            line-height: 50px;
            background-color: #2798eb;
            border: 0;
            border-radius: 10px;
            text-decoration: none;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <div class="mast">
                    <p class="title">这是个标题</p>
                    <p class="desc">好多好多好多鱼</p>
                    <button>这是个按钮</button>
                </div>
                <img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
            </li>
            <li class="two">
                <div class="mast">
                    <p class="title">这是个标题</p>
                    <p class="desc">好多好多好多鱼</p>
                    <button>这是个按钮</button>
                </div>
                <img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
            </li>
            <li class="three">
                <div class="mast">
                    <p class="title">这是个标题</p>
                    <p class="desc">好多好多好多鱼</p>
                    <button>这是个按钮</button>
                </div>
                <img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
            </li>
            <li>
                <div class="mast">
                    <p class="title">这是个标题</p>
                    <p class="desc">好多好多好多鱼</p>
                    <a class="btn" href="https://www.change.tm">这是个按钮</a>
                </div>
                <img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
            </li>
        </ul>
    </div>
</body>

</html>

波浪效果

image-20200314191549797

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS波浪动画</title>

<style>
@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}</style>
</head>
<body>

<div class="waveWrapper waveAnimation">
  <div class="waveWrapperInner bgTop">
    <div class="wave waveTop" style="background-image: url('https://ae01.alicdn.com/kf/H6e46b308e8744a98b3f01685f5d1bbe4o.png')"></div>
  </div>
  <div class="waveWrapperInner bgMiddle">
    <div class="wave waveMiddle" style="background-image: url('https://ae01.alicdn.com/kf/H43dd1667ee2c49fa919897302c4e4b38O.png')"></div>
  </div>
  <div class="waveWrapperInner bgBottom">
    <div class="wave waveBottom" style="background-image: url('https://ae01.alicdn.com/kf/H8eabe173b9b64272912d9aa021934071W.png')"></div>
  </div>
</div>
</body>
</html>

实现波浪背景动态无限次循环播放(连续性)

  1. 图片:左边的图像与右边的图像是完全重合(高度一致)
  2. HTML页面:使用background-image属性引入波浪图片
    • 将背景图像显示成水平方向两个完全重复的效果
      • 将引入图片的div元素的宽度设置为父级容器的200%
      • 通过background-size属性设置为背景图像水平方向的值为50%
    • 设置动画执行的关键帧时,将100%时的关键帧设置为50%.

CSS3渐变背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景渐变动画效果</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            /* background-image:linear-gradient(-45deg,#12c2e9,#c471ed,#f64f59);
            animation: backgroundBG 10s infinite linear;
            background-size: 300%; */
        }
        @keyframes backgroundBG{
            0%{
                background-position: 0 50%;
            }
            50%{
                background-position: 100% 50%;
            }
            100%{
                background-position: 0% 50%;
            }
        }
        .container{
            width: 100%;
            height: 100%;
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* background-image:linear-gradient(-45deg,#12c2e9,#c471ed,#f64f59); */
            /* background-image:linear-gradient(-45deg,#f64f59,#b21f1f,#1a2a6c); */
            background-image:linear-gradient(-45deg,#0099F7,#F11712);
            background-image:linear-gradient(-45deg,#FC354C,#0ABFBC);
            animation: backgroundBG 10s infinite linear;
            background-size: 300%;
        }
    </style>
</head>
<body>
    <div class="container">

    </div>
</body>
</html>

星级评价效果

image-20200314192122656

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星星评级动态效果</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>

  <style>
    body {
      background: #222;
    }

    .rating {
      font-family: "Ionicons";
      /* 水平+垂直方向居中显示 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      direction: rtl;
    }

    .rating input {
      opacity: 0;
    }

    .rating input:checked~label::before {
      opacity: 1;
    }

    .rating label {
      position: relative;
      margin-right: 6px;
      font-size: 5em;
      color: gold;
      cursor: pointer;
    }

    .rating label::before {
      position: absolute;
      content: "\f384";
      opacity: 0;
      transition: 0.5s;
    }

    .rating label:hover~label::before {
      transition: 0.5s;
    }

    .rating label:hover::before {
      transform: scale(1.2);
    }

    .rating label:hover::before,
    .rating label:hover~label::before {
      opacity: 1 !important;
    }

    .rating:hover input:checked~label::before {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div class="rating">
    <input type="radio" name="rating" id="5" value="5" />
    <label for="5"><i class="icon ion-md-star-outline"></i></label>
    <input type="radio" name="rating" id="4" value="4" />
    <label for="4"><i class="icon ion-md-star-outline"></i></label>
    <input type="radio" name="rating" id="3" value="3" />
    <label for="3"><i class="icon ion-md-star-outline"></i></label>
    <input type="radio" name="rating" id="2" value="2" />
    <label for="2"><i class="icon ion-md-star-outline"></i></label>
    <input type="radio" name="rating" id="1" value="1" />
    <label for="1"><i class="icon ion-md-star-outline"></i></label>
  </div>
</body>

</html>

代码二

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>
    <title>Document</title>
    <style>
        body{
            background: #222;
        }
        .container{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            direction: rtl;
        }
        .container input{
            opacity: 0;

        }
        .container label{
            color: gold;
            font-size: 84px;
            position: relative;
            cursor: pointer;
        }

        .container label:before{
            content: "\f384";
            position: absolute; 
            top: 15%;
            opacity: 0;
            transition: .5s;
        }
        .container label:hover:before,
        .container label:hover~label::before{
            opacity:  1 !important;
        }
        .container label i::before{
            transition: .5s;
        }
        .container label:hover i::before{
            transform: scale(1.2);
        }
        .container input:focus~label::before{
            opacity:  1 !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="radio" name="1" id="1" />
        <label class="ion-md-star" for="1" >
            <i class="icon ion-md-star-outline"></i>
        </label>
        <input type="radio" name="2" id="2" />
        <label for="2" class="ion-md-star">
            <i class="icon ion-md-star-outline"></i>
        </label>
        <input type="radio" name="3" id="3" />
        <label for="3" class="ion-md-star">
            <i class="icon ion-md-star-outline"></i>
        </label>
        <input type="radio" name="4" id="4" />
        <label for="4" class="ion-md-star">
            <i class="icon ion-md-star-outline"></i>
        </label>
        <input type="radio" name="5" id="5" />
        <label for="5" class="ion-md-star">
            <i class="icon ion-md-star-outline"></i>
        </label>
    </div>
</body>

</html>

音频显示效果

image-20200314192302746

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>css3音频播放图标动画特效</title>
<style>
    .playing {
  background: rgba(255, 255, 255, 0.1);
  width: 3rem;
  height: 3rem;
  border-radius: .3rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: .5rem;
  box-sizing: border-box;
}

.playing__bar {
  display: inline-block;
  background: white;
  width: .5rem;
  height: 100%;
  -webkit-animation: up-and-down 1.3s ease infinite alternate;
          animation: up-and-down 1.3s ease infinite alternate;
}

.playing__bar1 {
  height: 60%;
}

.playing__bar2 {
  height: 30%;
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}

.playing__bar3 {
  height: 75%;
  -webkit-animation-delay: -3.7s;
          animation-delay: -3.7s;
}

@-webkit-keyframes up-and-down {
  10% {
    height: 30%;
  }
  30% {
    height: 100%;
  }
  60% {
    height: 50%;
  }
  80% {
    height: 75%;
  }
  100% {
    height: 20%;
  }
}

@keyframes up-and-down {
  10% {
    height: 30%;
  }
  30% {
    height: 100%;
  }
  60% {
    height: 50%;
  }
  80% {
    height: 75%;
  }
  100% {
    height: 20%;
  }
}
body {
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
  color: white;
}
</style>

</head>
<body>

<div class="playing">
  <span class="playing__bar playing__bar1"></span>
  <span class="playing__bar playing__bar2"></span>
  <span class="playing__bar playing__bar3"></span>
</div>

</body>
</html>

小米首页轮播图(自动轮播)

实现关键

设置动画关键帧包含:

  1. 淡入效果 0%~2%
  2. 停留效果 2%~20%
  3. 淡出效果 20%~22%
  4. 淡入时的层级要高于淡出时的层级

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米轮播图示例</title>
    <style>
      /* 
            设置动画关键帧包含:
            1. 淡入效果 0%~2%
            2. 停留效果 2%~20%
            3. 淡出效果 20%~22%
            淡入时的层级要高于淡出时的层级
         */
      @keyframes fade {
        0% {
          opacity: 0;
          z-index: 2;
        }

        2% {
          opacity: 1;
          z-index: 1;
        }

        20% {
          opacity: 1;
          z-index: 1;
        }

        22% {
          opacity: 0;
          z-index: 0;
        }

        100% {
          opacity: 0;
          z-index: 0;
        }
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 1226px;
        height: 460px;
        background: lightcyan;
        margin: 100px auto;
      }

      .container .imgList {
        width: 100%;
        position: relative;
      }

      .container .imgList img {
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        /* 执行时长最好是图片数量的倍数
                每一张图片所占时长为10s
                    每一张图片的停留时间 - 9s
                    每一张图片的淡入时间 - 1s
             */
        animation-duration: 50s;
        animation-name: fade;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

      .container .imgList img:not(:first-child) {
        opacity: 0;
      }

      .container .imgList img:nth-child(1) {
        animation-delay: -1s;
      }

      .container .imgList img:nth-child(2) {
        animation-delay: 9s;
      }

      .container .imgList img:nth-child(3) {
        animation-delay: 19s;
      }

      .container .imgList img:nth-child(4) {
        animation-delay: 29s;
      }

      .container .imgList img:nth-child(5) {
        animation-delay: 39s;
      }
    </style>
  </head>

  <body>
    <!-- 视觉容器 -->
    <div class="container">
      <!-- 图片列表 -->
      <div class="imgList">
        <img
          src="https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg"
        />
      </div>
      <!-- 左右切换菜单 -->
      <div class="menu"></div>
      <!-- 轮播图的导航 -->
      <div class="nav"></div>
    </div>
  </body>
</html>

小米轮播图(左右按钮)

实现思路

  1. 需要五组input+label标签(且input标签的type为radio)

    /* 第一个需带有checked,因为默认情况下选择的是第一个,也就是默认情况下第一个被选中 */
    <input type="radio" name="slide" id="slide1" checked />
    <input type="radio" name="slide" id="slide2" />
    <input type="radio" name="slide" id="slide3" />
    <input type="radio" name="slide" id="slide4" />
    <input type="radio" name="slide" id="slide5" />
    <label for="slide1" class="slide slide1"></label>
    <label for="slide2" class="slide slide2"></label>
    <label for="slide3" class="slide slide3"></label>
    <label for="slide4" class="slide slide4"></label>
    <label for="slide5" class="slide slide5"></label>

    label标签的for属性与input标签的id属性相对应。也就是说当点击第一个label标签时,第一个input被选中,点击第二个label标签时,第二个input被选中……

  2. 在CSS上,默认图片透明度均为0,层级(z-index)默认也为0。

  3. 利用伪类选择器(:checked)来判断哪张图片应该被显示

    简单来说就是当第一个input加入checked属性时(被选中时),那么他的层级(z-index)与透明度则变为1。其他也是同理,因为默认的层级与透明度都是0,所以当选择另外input时刚才那个就会回到默认状态

  4. 左右按钮的实现

    首先应该明确的是第几张图片出现时左右按钮应该指向哪一张图片。例如当显示第一张图片时左按钮应去向第五章,右按钮应去向第二张。

    其次就是这些按钮应该随着不同图片的出现而变换,类似于一个按钮绑定一个图片。

    图片左按钮右按钮
    第一张图片第五张第二张
    第二章图片第一张第三张
    第三章图片第二张第四张
    第四章图片第三张第五张
    第五章图片第四张第一张
  5. 最后只需要用input是否被checked就可以判断哪一个label标签应该显示。

在线显示地址:https://antmoe.gitee.io/project/2020/03/17/index.html

由于演示图有点大,所以直接换成链接了。https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile1/imgbed/2020/03/17/20200317195705.gif

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米轮播图示例</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 1226px;
        height: 460px;
        background: lightcyan;
        margin: 100px auto;
        position: relative;
      }

      .container .imgList {
        width: 100%;
        position: relative;
      }

      .container .imgList img {
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transition: opacity 1s;
        z-index: 0;
        opacity: 0;
      }

      .slide {
        width: 41px;
        height: 69px;
        background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        display: none;
        cursor: pointer;
      }
      /* 
    使用focus伪类模拟点击事件的效果
    1. html结构:必须有input 和 label 且input的id与label的for相匹配
    2. css样式:input:focus
     */

      #slide5:checked ~ .imgList img:nth-of-type(5),
      #slide4:checked ~ .imgList img:nth-of-type(4),
      #slide3:checked ~ .imgList img:nth-of-type(3),
      #slide2:checked ~ .imgList img:nth-of-type(2),
      #slide1:checked ~ .imgList img:nth-of-type(1) {
        z-index: 1;
        opacity: 1;
      }

      /* 
    第五张图片时 
      左按钮应该去4 右按钮去1 
    第四张图片时
      左按钮应该去3 右按钮去5
    第三张图片时
      左按钮应该去2 右按钮去4
    第二张图片时
      左按钮应该去1 右按钮去3
    第一张图片时
      左按钮应该去5 右按钮去2
    */
      #slide5:checked ~ label:nth-of-type(1),
      #slide4:checked ~ label:nth-of-type(5),
      #slide3:checked ~ label:nth-of-type(4),
      #slide2:checked ~ label:nth-of-type(3),
      #slide1:checked ~ label:nth-of-type(2) {
        display: block;
        right: 0;
        background-position: -125px;
      }
      /* 鼠标悬停改变雪碧图位置 */
      #slide5:checked ~ label:nth-of-type(1):hover,
      #slide4:checked ~ label:nth-of-type(5):hover,
      #slide3:checked ~ label:nth-of-type(4):hover,
      #slide2:checked ~ label:nth-of-type(3):hover,
      #slide1:checked ~ label:nth-of-type(2):hover {
        background-position: -41px;
      }
      #slide5:checked ~ label:nth-of-type(4),
      #slide4:checked ~ label:nth-of-type(3),
      #slide3:checked ~ label:nth-of-type(2),
      #slide2:checked ~ label:nth-of-type(1),
      #slide1:checked ~ label:nth-of-type(5) {
        display: block;
        left: 0;
        background-position: -84px;
      }
      /* 鼠标悬停改变雪碧图位置 */
      #slide5:checked ~ label:nth-of-type(4):hover,
      #slide4:checked ~ label:nth-of-type(3):hover,
      #slide3:checked ~ label:nth-of-type(2):hover,
      #slide2:checked ~ label:nth-of-type(1):hover,
      #slide1:checked ~ label:nth-of-type(5):hover {
        background-position: 0px;
      }
      input {
        display: none;
      }
    </style>
  </head>

  <body>
    <!-- 视觉容器 -->
    <div class="container">
      <!-- 左右切换菜单 -->
      <input type="radio" name="slide" id="slide1" checked />
      <input type="radio" name="slide" id="slide2" />
      <input type="radio" name="slide" id="slide3" />
      <input type="radio" name="slide" id="slide4" />
      <input type="radio" name="slide" id="slide5" />
      <label for="slide1" class="slide slide1"></label>
      <label for="slide2" class="slide slide2"></label>
      <label for="slide3" class="slide slide3"></label>
      <label for="slide4" class="slide slide4"></label>
      <label for="slide5" class="slide slide5"></label>
      <!-- 图片列表 -->
      <div class="imgList">
        <img
          src="https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg"
        />
      </div>
      <!-- 轮播图的导航 -->
      <div class="nav"></div>
    </div>
  </body>
</html>

轮播图的导航栏

导航栏基于上一个可以左右滑动的轮播图实现。实现方法很简单。

  1. 由于已经实现了可以切换图片的label标签,因此复制一个一模一样的即可。

    <div class="nav">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
        <label for="slide5"></label>
    </div>
  2. 接下来需要做的就是继续将每一张图片与刚加入的label标签绑定

    #slide1:checked~.nav label:nth-child(1),
    #slide2:checked~.nav label:nth-child(2),
    #slide3:checked~.nav label:nth-child(3),
    #slide4:checked~.nav label:nth-child(4),
    #slide5:checked~.nav label:nth-child(5) {
    border-color: rgba(0, 0, 0, .4);
    background: hsla(0, 0%, 100%, 1);
    }
  3. 这样基本上就可以了,至于显示位置及样式根据自己调整即可。

参考代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米轮播图示例</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 1226px;
        height: 460px;
        background: lightcyan;
        margin: 100px auto;
        position: relative;
      }

      .container .imgList {
        width: 100%;
        position: relative;
      }

      .container .imgList img {
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transition: opacity 1s;
        z-index: 0;
        opacity: 0;
      }

      .slide {
        width: 41px;
        height: 69px;
        background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        display: none;
        cursor: pointer;
      }
      /* 
    使用focus伪类模拟点击事件的效果
    1. html结构:必须有input 和 label 且input的id与label的for相匹配
    2. css样式:input:focus
     */

      #slide5:checked ~ .imgList img:nth-of-type(5),
      #slide4:checked ~ .imgList img:nth-of-type(4),
      #slide3:checked ~ .imgList img:nth-of-type(3),
      #slide2:checked ~ .imgList img:nth-of-type(2),
      #slide1:checked ~ .imgList img:nth-of-type(1) {
        z-index: 1;
        opacity: 1;
      }

      /* 
    第五张图片时 
      左按钮应该去4 右按钮去1 
    第四张图片时
      左按钮应该去3 右按钮去5
    第三张图片时
      左按钮应该去2 右按钮去4
    第二张图片时
      左按钮应该去1 右按钮去3
    第一张图片时
      左按钮应该去5 右按钮去2
    */
      #slide5:checked ~ label:nth-of-type(1),
      #slide4:checked ~ label:nth-of-type(5),
      #slide3:checked ~ label:nth-of-type(4),
      #slide2:checked ~ label:nth-of-type(3),
      #slide1:checked ~ label:nth-of-type(2) {
        display: block;
        right: 0;
        background-position: -125px;
      }
      /* 鼠标悬停改变雪碧图位置 */
      #slide5:checked ~ label:nth-of-type(1):hover,
      #slide4:checked ~ label:nth-of-type(5):hover,
      #slide3:checked ~ label:nth-of-type(4):hover,
      #slide2:checked ~ label:nth-of-type(3):hover,
      #slide1:checked ~ label:nth-of-type(2):hover {
        background-position: -41px;
      }
      #slide5:checked ~ label:nth-of-type(4),
      #slide4:checked ~ label:nth-of-type(3),
      #slide3:checked ~ label:nth-of-type(2),
      #slide2:checked ~ label:nth-of-type(1),
      #slide1:checked ~ label:nth-of-type(5) {
        display: block;
        left: 0;
        background-position: -84px;
      }
      /* 鼠标悬停改变雪碧图位置 */
      #slide5:checked ~ label:nth-of-type(4):hover,
      #slide4:checked ~ label:nth-of-type(3):hover,
      #slide3:checked ~ label:nth-of-type(2):hover,
      #slide2:checked ~ label:nth-of-type(1):hover,
      #slide1:checked ~ label:nth-of-type(5):hover {
        background-position: 0px;
      }
      input {
        display: none;
      }
      /* 导航 */
      .nav {
        width: 400px;
        height: 8px;
        position: absolute;
        left: auto;
        right: 30px;
        bottom: 20px;
        text-align: right;
        z-index: 99;
      }

      .nav label {
        /* z-index: 99; */
        width: 14px;
        height: 14px;
        border: 2px solid #fff;
        border-color: hsla(0, 0%, 100%, 0.3);
        border-radius: 50%;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.4);
        opacity: 1;
        margin-left: 3px;
        display: inline-block;
        cursor: pointer;
      }

      .nav label:hover {
        border-color: rgba(0, 0, 0, 0.4);
        background: hsla(0, 0%, 100%, 1);
      }

      /* 底部导航 */
      #slide1:checked ~ .nav label:nth-child(1),
      #slide2:checked ~ .nav label:nth-child(2),
      #slide3:checked ~ .nav label:nth-child(3),
      #slide4:checked ~ .nav label:nth-child(4),
      #slide5:checked ~ .nav label:nth-child(5) {
        border-color: rgba(0, 0, 0, 0.4);
        background: hsla(0, 0%, 100%, 1);
      }
    </style>
  </head>

  <body>
    <!-- 视觉容器 -->
    <div class="container">
      <!-- 左右切换菜单 -->
      <input type="radio" name="slide" id="slide1" checked />
      <input type="radio" name="slide" id="slide2" />
      <input type="radio" name="slide" id="slide3" />
      <input type="radio" name="slide" id="slide4" />
      <input type="radio" name="slide" id="slide5" />
      <label for="slide1" class="slide slide1"></label>
      <label for="slide2" class="slide slide2"></label>
      <label for="slide3" class="slide slide3"></label>
      <label for="slide4" class="slide slide4"></label>
      <label for="slide5" class="slide slide5"></label>
      <!-- 图片列表 -->
      <div class="imgList">
        <img
          src="https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg"
        />
      </div>
      <!-- 轮播图的导航 -->
      <div class="nav">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
        <label for="slide5"></label>
      </div>
    </div>
  </body>
</html>

百叶窗效果

在实现了上述轮播图后实现百叶窗效果是需要改造的。

  1. 首先是HTML结构,图片列表使用的是img标签,百叶窗实际上是将图片分割成不同的小块然后逐个切换。所以需要将HTML结构改造为一个div(作为每个小块的容器)嵌套若干个(这里用四个举例)div(作为图片展示)

    <div class="imgList">
        <div class="img">
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
        </div>
        <div class="img">
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
        </div>
        <div class="img">
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
        </div>
        <div class="img">
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
        </div>
        <div class="img">
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
        </div>
    </div>

    上述结构中,img作为每张图片的容器,frag是实际上展示图片的容器。也就是每个frag显示图片的四分之一(随窗口数而定)

  2. 对于imgfrag两个class的样式需要调整为

    .container .imgList .img {
        height: 100%;
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0;
    }
    .container .imgList .img .frag {
        float: left;
        height: 460px;
        width: 25%;
        background-size: 1226px 460px;
        opacity: 0;
        z-index: 0;
    }

    frag的宽度为容器的25%也就是四分之一,高度也是容器的高度。由于这个效果是基于每个小块的不同切换效果实现的,那么自然需要将背景图像的大小调整好也就是background-size属性。

  3. 设置每块容器(img)里每个小块(frag)显示的图片

    .container .imgList .img:nth-child(1) .frag {
        background-image: url(https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png);
    }
    
    .container .imgList .img:nth-child(2) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg);
    }
    
    .container .imgList .img:nth-child(3) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg);
    }
    
    .container .imgList .img:nth-child(4) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg);
    }
    
    .container .imgList .img:nth-child(5) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg);
    }
  4. 调整四小块中每一块显示的区域。

    这一步很简单,如果不修改每一块的位置,那么四张图显示的都是一样的。而我们需要的是四小块拼成一个完整的。并且每一个都是有一个延迟的,所以同样需要为每一个小块设置延迟时间(transition-delay)。

    .container .imgList .img .frag:nth-child(2) {
        background-position: -306.5px 0;
        transition-delay: .2s;
    }
    
    .container .imgList .img .frag:nth-child(3) {
        background-position: -613px 0;
        transition-delay: .3s;
    }
    
    .container .imgList .img .frag:nth-child(4) {
        background-position: -919.5px 0;
        transition-delay: .4s;
    }
    
    .container .imgList .img .frag:nth-child(5) {
        background-position: -1226px 0;
        transition-delay: .5s;
    }
  5. 调整当按钮(label标签)点下去时改变的元素。

    #slide1:checked~.imgList .img:nth-child(1) .frag,
    #slide2:checked~.imgList .img:nth-child(2) .frag,
    #slide3:checked~.imgList .img:nth-child(3) .frag,
    #slide4:checked~.imgList .img:nth-child(4) .frag,
    #slide5:checked~.imgList .img:nth-child(5) .frag {
        opacity: 1;
        z-index: 1;
    }
  6. 此时页面已经可以有基本效果了。接下来需要做的只是美化。

    #slide1:checked~.imgList .img:nth-child(1) .frag,
    #slide2:checked~.imgList .img:nth-child(2) .frag,
    #slide3:checked~.imgList .img:nth-child(3) .frag,
    #slide4:checked~.imgList .img:nth-child(4) .frag,
    #slide5:checked~.imgList .img:nth-child(5) .frag {
        opacity: 1;
        z-index: 1;
        transform: rotateY(90deg) translateZ(180deg) scale(1.5);
        filter: saturate(1) blur(0px) brightness(1) contrast(1);
    }
    .container .imgList .img .frag {
        float: left;
        height: 460px;
        width: 25%;
        background-size: 1226px 460px;
        opacity: 0;
        z-index: 0;
        transform-origin: center right;
        filter: saturate(0) blur(10px) brightness(.6) contrast(4);
        transition: transform .6s, opacity .6s, filter .6s ease-out;
    
    }

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米轮播图示例--百叶窗效果</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 1226px;
            height: 460px;
            background: lightcyan;
            margin: 100px auto;
            position: relative;
        }

        .container .imgList {
            width: 100%;
            position: relative;
        }

        .container .imgList .img {
            height: 100%;
            width: 100%;
            height: auto;
            position: absolute;
            left: 0;
            top: 0;
        }

        .container .imgList .img .frag {
            float: left;
            height: 460px;
            width: 25%;
            background-size: 1226px 460px;
            opacity: 0;
            z-index: 0;
            transform-origin: center right;
            filter: saturate(0) blur(10px) brightness(.6) contrast(4);
            transition: transform .6s, opacity .6s, filter .6s ease-out;
        }

        .container .imgList .img:nth-child(1) .frag {
            background-image: url(https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png);
        }

        .container .imgList .img:nth-child(2) .frag {
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg);
        }

        .container .imgList .img:nth-child(3) .frag {
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg);
        }

        .container .imgList .img:nth-child(4) .frag {
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg);
        }

        .container .imgList .img:nth-child(5) .frag {
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg);
        }

        .container .imgList .img .frag:nth-child(2) {
            background-position: -306.5px 0;
            transition-delay: .2s;
        }

        .container .imgList .img .frag:nth-child(3) {
            background-position: -613px 0;
            transition-delay: .3s;
        }

        .container .imgList .img .frag:nth-child(4) {
            background-position: -919.5px 0;
            transition-delay: .4s;
        }

        .container .imgList .img .frag:nth-child(5) {
            background-position: -1226px 0;
            transition-delay: .5s;
        }

        #slide1:checked~.imgList .img:nth-child(1) .frag,
        #slide2:checked~.imgList .img:nth-child(2) .frag,
        #slide3:checked~.imgList .img:nth-child(3) .frag,
        #slide4:checked~.imgList .img:nth-child(4) .frag,
        #slide5:checked~.imgList .img:nth-child(5) .frag {
            opacity: 1;
            z-index: 1;
            transform: rotateY(90deg) translateZ(180deg) scale(1.5);
            filter: saturate(1) blur(0px) brightness(1) contrast(1);
        }

        .slide {
            width: 41px;
            height: 69px;
            background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
            background-repeat: no-repeat;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 99;
            display: none;
            cursor: pointer;
        }

        #slide5:checked~.imgList img:nth-of-type(5),
        #slide4:checked~.imgList img:nth-of-type(4),
        #slide3:checked~.imgList img:nth-of-type(3),
        #slide2:checked~.imgList img:nth-of-type(2),
        #slide1:checked~.imgList img:nth-of-type(1) {
            z-index: 1;
            opacity: 1;
        }

        #slide5:checked~label:nth-of-type(1),
        #slide4:checked~label:nth-of-type(5),
        #slide3:checked~label:nth-of-type(4),
        #slide2:checked~label:nth-of-type(3),
        #slide1:checked~label:nth-of-type(2) {
            display: block;
            right: 0;
            background-position: -125px;
        }

        /* 鼠标悬停改变雪碧图位置 */
        #slide5:checked~label:nth-of-type(1):hover,
        #slide4:checked~label:nth-of-type(5):hover,
        #slide3:checked~label:nth-of-type(4):hover,
        #slide2:checked~label:nth-of-type(3):hover,
        #slide1:checked~label:nth-of-type(2):hover {
            background-position: -41px;
        }

        #slide5:checked~label:nth-of-type(4),
        #slide4:checked~label:nth-of-type(3),
        #slide3:checked~label:nth-of-type(2),
        #slide2:checked~label:nth-of-type(1),
        #slide1:checked~label:nth-of-type(5) {
            display: block;
            left: 0;
            background-position: -84px;
        }

        /* 鼠标悬停改变雪碧图位置 */
        #slide5:checked~label:nth-of-type(4):hover,
        #slide4:checked~label:nth-of-type(3):hover,
        #slide3:checked~label:nth-of-type(2):hover,
        #slide2:checked~label:nth-of-type(1):hover,
        #slide1:checked~label:nth-of-type(5):hover {
            background-position: 0px;
        }

        input {
            display: none;
        }

        /* 导航 */
        .nav {
            width: 400px;
            height: 8px;
            position: absolute;
            left: auto;
            right: 30px;
            bottom: 20px;
            text-align: right;
            z-index: 99;
        }

        .nav label {
            /* z-index: 99; */
            width: 14px;
            height: 14px;
            border: 2px solid #fff;
            border-color: hsla(0, 0%, 100%, 0.3);
            border-radius: 50%;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.4);
            opacity: 1;
            margin-left: 3px;
            display: inline-block;
            cursor: pointer;
        }

        .nav label:hover {
            border-color: rgba(0, 0, 0, 0.4);
            background: hsla(0, 0%, 100%, 1);
        }

        /* 底部导航 */
        #slide1:checked~.nav label:nth-child(1),
        #slide2:checked~.nav label:nth-child(2),
        #slide3:checked~.nav label:nth-child(3),
        #slide4:checked~.nav label:nth-child(4),
        #slide5:checked~.nav label:nth-child(5) {
            border-color: rgba(0, 0, 0, 0.4);
            background: hsla(0, 0%, 100%, 1);
        }
    </style>
</head>

<body>
    <!-- 视觉容器 -->
    <div class="container">
        <!-- 左右切换菜单 -->
        <input type="radio" name="slide" id="slide1" checked />
        <input type="radio" name="slide" id="slide2" />
        <input type="radio" name="slide" id="slide3" />
        <input type="radio" name="slide" id="slide4" />
        <input type="radio" name="slide" id="slide5" />
        <label for="slide1" class="slide slide1"></label>
        <label for="slide2" class="slide slide2"></label>
        <label for="slide3" class="slide slide3"></label>
        <label for="slide4" class="slide slide4"></label>
        <label for="slide5" class="slide slide5"></label>
        <!-- 图片列表 -->
        <div class="imgList">
            <div class="img">
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
            </div>
            <div class="img">
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
            </div>
            <div class="img">
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
            </div>
            <div class="img">
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
            </div>
            <div class="img">
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
            </div>
        </div>
        <!-- 轮播图的导航 -->
        <div class="nav">
            <label for="slide1"></label>
            <label for="slide2"></label>
            <label for="slide3"></label>
            <label for="slide4"></label>
            <label for="slide5"></label>
        </div>
    </div>
</body>

</html>

下载按钮动态效果

  1. 分析

    这个效果大概分成几个部分

    • 静态按钮
    • 点击后按钮宽度变小,然后成圆形
    • 按钮变大变小
    • 小白球转圈
    • 回到圆中心位置,显示“√”
  2. 基于分析,静态效果很容易实现。

  3. 对于紫色的小球变大变小也很简单。scale即可

    如果使用了translate属性,需要将translate属性写在scale之前。

    @keyframes circle{
        0%,15%,45%,75%{
            transform:translate(-50%,-50%) scale(0.8) ;
    }
    30%,60%,90%{
        transform:translate(-50%,-50%) scale(1.2) ;
    
    }
    100%{
        transform: translate(-50%,-50%) scale(1) ;
    
    }
    

    }

4. 小白球旋转

   ```css
   @keyframes dot{
       8%{
           transform: scale(0);
       }
       16%{
           transform: scale(1) rotate(30deg) translateX(48px);

       }
       95%{
           transform: scale(1) rotate(1000deg) translateX(48px);
       }
       100%{
           transform: scale(0.125) rotate(1050deg) translate(52px );
       }
   }
  1. 点击效果可以使用伪类focus模拟

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes circle {
        0%,
        15%,
        45%,
        75% {
          transform: translate(-50%, -50%) scale(0.8);
        }

        30%,
        60%,
        90% {
          transform: translate(-50%, -50%) scale(1.2);
        }

        100% {
          transform: translate(-50%, -50%) scale(1);
        }
      }

      @keyframes dot {
        8% {
          transform: scale(0);
        }

        16% {
          transform: scale(1) rotate(30deg) translateX(48px);
        }

        95% {
          transform: scale(1) rotate(1000deg) translateX(48px);
        }

        100% {
          transform: scale(0.125) rotate(1050deg) translate(52px);
        }
      }

      body {
        background-color: #000;
      }

      .button {
        display: block;
        width: 160px;
        height: 41px;
        background: transparent;
        border-radius: 10px;
        color: white;
        border: none;
        outline: none;
        cursor: pointer;
        margin: 100px auto;
        position: relative;
      }

      .button::after,
      .button::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transform-origin: 50% 50%;
      }

      .button::before {
        width: 100%;
        height: 100%;
        background-color: #6d58ff;
        border-radius: 10px;
        transition: all 0.5s;
      }

      .button:focus::before {
        width: 41px;
        height: 41px;
        border-radius: 50%;
        animation: circle 3s linear forwards;
      }

      .button:focus span {
        display: none;
      }

      .button::after {
        content: "";
        width: 16px;
        height: 16px;
        background: #fff;
        z-index: 2;
        border-radius: 50%;
        transform: scale(0);
        /* 设置外部白色圆圈的圆心位置 */
        transform-origin: 0 0;
      }

      .button:focus::after {
        animation: dot 3s linear forwards;
      }

      .button span {
        position: relative;
        z-index: 1;
      }

      .button svg {
        width: 15px;
        height: 13px;
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        stroke: #fff;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transform: translate(-50%, -50%);
        stroke-dasharray: 17px;
        stroke-dashoffset: 17px;
        transition: stroke-dashoffset 0.3s ease;
        transition-delay: 3s;
      }

      .button:focus svg {
        stroke-dashoffset: 34px;
      }
    </style>
  </head>

  <body>
    <button class="button">
      <span>下载</span>
      <svg view-Box="0 0 15 13">
        <polyline points="2 6.5 6 10.5 13 2.5"></polyline>
      </svg>
    </button>
  </body>
</html>