• 技术文章 >web前端 >css教程

    原来利用纯CSS也能实现文字轮播与图片轮播!

    青灯夜游青灯夜游2022-06-10 20:32:21转载496
    怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

    今天,分享一个实际业务中能够用得上的动画技巧。【推荐学习:css视频教程

    巧用逐帧动画,配合补间动画实现一个无限循环的轮播效果,像是这样:

    看到上述示意图,有同学不禁会发问,这不是个非常简单的位移动画么?

    我们来简单分析分析,从表面上看,确实好像只有元素的 transform: translate() 在位移,但是注意,这里有两个难点:

    到这里,你可以暂停思考一下,如果有 20 个元素,需要进行类似的无限轮播播报,使用 CSS 实现,你会怎么去做呢?

    逐帧动画控制整体切换

    首先,我需要利用到逐帧动画效果,也被称为步骤缓动函数,利用的是 animation-timing-function 中,的 steps,语法如下:

    {
        /* Keyword values */
        animation-timing-function: step-start;
        animation-timing-function: step-end;
        /* Function values */
        animation-timing-function: steps(6, start)
        animation-timing-function: steps(4, end);
    }

    如果你对 steps 的语法还不是特别了解,强烈建议你先看看我的这篇文章 -- 深入浅出 CSS 动画,它对理解本文起着至关重要的作用。

    好的,还是文章以开头的例子,假设我们存在这样 HTML 结构:

    <div class="g-container">
      <ul>
        <li>Lorem ipsum 1111111</li>
        <li>Lorem ipsum 2222222</li>
        <li>Lorem ipsum 3333333</li>
        <li>Lorem ipsum 4444444</li>
        <li>Lorem ipsum 5555555</li>
        <li>Lorem ipsum 6666666</li>
      </ul>
    </div>

    首先,我们实现这样一个简单的布局:

    在这里,要实现轮播效果,并且是任意个数,我们可以借助 animation-timing-function: steps()

    :root {
      // 轮播的个数
      --s: 6;
      // 单个 li 容器的高度
      --h: 36;
      // 单次动画的时长
      --speed: 1.5s;
    }
    .g-container {
      width: 300px;
      height: calc(var(--h) * 1px);
    }
    ul {
      display: flex;
      flex-direction: column;
      animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
    }
    ul li {
      width: 100%;
    }
    @keyframes move {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(0, calc(var(--s) * var(--h) * -1px));
      }
    }

    别看到上述有几个 CSS 变量就慌了,其实很好理解:

    上述的效果,实际如下:

    如果给容器添加上 overflow: hidden,就是这样的效果:

    这样,我们就得到了整体的结构,至少,整个效果是循环的。

    但是由于只是逐帧动画,所以只能看到切换,但是每一帧之间,没有过渡动画效果。所以,接下来,我们还得引入补间动画。

    利用补间动画实现两组数据间的切换

    我们需要利用补间动画,实现动态的切换效果。

    这一步,其实也非常简单,我们要做的,就是将一组数据,利用 transform,从状态 A 位移到 状态 B。

    单独拿出一个来演示的话,大致的代码如下:

    <div class="g-container">
      <ul style="--s: 6">
        <li>Lorem ipsum 1111111</li>
        <li>Lorem ipsum 2222222</li>
        <li>Lorem ipsum 3333333</li>
        <li>Lorem ipsum 4444444</li>
        <li>Lorem ipsum 5555555</li>
        <li>Lorem ipsum 6666666</li>
      </ul>
    </div>
    :root {
      --h: 36;
      --speed: 1.2s;
    }
    ul li {
      height: 36px;
      animation: liMove calc(var(--speed)) infinite;
    }
    @keyframes liMove {
      0% {
        transform: translate(0, 0);
      }
      80%,
      100%  {
        transform: translate(0, -36px);
      }
    }

    非常简单的一个动画:

    bgg1

    基于上述效果,我们如果把一开始提到的 逐帧动画 和这里这个 补间动画 结合一下,ul 的整体移动,和 li 的 单个移动叠在在一起:

    :root {
      // 轮播的个数
      --s: 6;
      // 单个 li 容器的高度
      --h: 36;
      // 单次动画的时长
      --speed: 1.5s;
    }
    .g-container {
      width: 300px;
      height: calc(var(--h) * 1px);
    }
    ul {
      display: flex;
      flex-direction: column;
      animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
    }
    ul li {
      width: 100%;
      animation: liMove calc(var(--speed)) infinite;
    }
    @keyframes move {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(0, calc(var(--s) * var(--h) * -1px));
      }
    }
    @keyframes liMove {
      0% {
        transform: translate(0, 0);
      }
      80%,
      100%  {
        transform: translate(0, calc(var(--h) * -1px));
      }
    }

    就能得到这样一个效果:

    Wow,神奇的化学反应产生了!基于 逐帧动画补间动画 的结合,我们几乎实现了一个轮播效果。

    当然,有一点瑕疵,可以看到,最后一组数据,是从第六组数据 transform 移动向了一组空数据:

    末尾填充头部第一组数据

    实际开发过轮播的同学肯定知道,这里,其实也很好处理,我们只需要在末尾,补一组头部的第一个数据即可:

    改造下我们的 HTML:

    <div class="g-container">
      <ul>
        <li>Lorem ipsum 1111111</li>
        <li>Lorem ipsum 2222222</li>
        <li>Lorem ipsum 3333333</li>
        <li>Lorem ipsum 4444444</li>
        <li>Lorem ipsum 5555555</li>
        <li>Lorem ipsum 6666666</li>
        <!--末尾补一个首条数据-->
        <li>Lorem ipsum 1111111</li>
      </ul>
    </div>

    这样,我们再看看效果:

    Beautiful!如果你还有所疑惑,我们给容器加上 overflow: hidden,实际效果如下,通过额外添加的最后一组数据,我们的整个动画刚好完美的衔接上,一个完美的轮播效果:

    完整的代码,你可以戳这里:CodePen Demo -- Vertical Infinity Loop

    https://codepen.io/Chokcoco/pen/RwQVByx

    横向无限轮播

    当然,实现了竖直方向的轮播,横向的效果也是一样的。

    并且,我们可以通过在 HTML 结构中,通过 style 内填写 CSS 变量值,传入实际的 li 个数,以达到根据不同 li 个数适配不同动画:

    <div class="g-container">
      <ul style="--s: 6">
        <li>Lorem ipsum 1111111</li>
        <li>Lorem ipsum 2222222</li>
        <li>Lorem ipsum 3333333</li>
        <li>Lorem ipsum 4444444</li>
        <li>Lorem ipsum 5555555</li>
        <li>Lorem ipsum 6666666</li>
        <!--末尾补一个首尾数据-->
        <li>Lorem ipsum 1111111</li>
      </ul>
    </div>

    整个动画的 CSS 代码基本是一致的,我们只需要改变两个动画的 transform 值,从竖直位移,改成水平位移即可:

    :root {
      --w: 300;
      --speed: 1.5s;
    }
    .g-container {
      width: calc(--w * 1px);
      overflow: hidden;
    }
    ul {
      display: flex;
      flex-wrap: nowrap;
       animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
    }
    ul li {
      flex-shrink: 0;
      width: 100%;
      height: 100%;
      animation: liMove calc(var(--speed)) infinite;
    }
    @keyframes move {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(calc(var(--s) * var(--w) * -1px), 0);
      }
    }
    @keyframes liMove {
      0% {
        transform: translate(0, 0);
      }
      80%,
      100%  {
        transform: translate(calc(var(--w) * -1px), 0);
      }
    }

    这样,我们就轻松的转化为了横向的效果:

    完整的代码,你可以戳这里:CodePen Demo -- Horizontal Infinity Loop

    https://codepen.io/Chokcoco/pen/JjpNBXY

    轮播图?不在话下

    OK,上面的只是文字版的轮播,那如果是图片呢?

    没问题,方法都是一样的。基于上述的代码,我们可以轻松地将它修改一下后得到图片版的轮播效果。

    代码都是一样的,就不再列出来,直接看看效果:

    完整的代码,你可以戳这里:CodePen Demo -- Horizontal Image Infinity Loop

    https://codepen.io/Chokcoco/pen/GRQvqgq

    掌握了这个技巧之后,你可以将它运用在非常多只需要简化版的轮播效果之上。

    再简单总结一下,非常有意思的技巧:

    (学习视频分享:web前端

    以上就是原来利用纯CSS也能实现文字轮播与图片轮播!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    上一篇:【吐血总结】20+个前端实用工具,快放入收藏夹! 下一篇:一文了解CSS3中的新属性object-view-box
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3线性渐变可以实现三角形吗• css3新增了哪三种边框效果• css3选择器怎么选第几个• css3动画效果有变形吗• css3中渐变怎么改变角度• css3中after的content属性里面都能放什么东西
    1/1

    PHP中文网