跑马灯(文字和图片轮播)效果纯css实现

文字复制一份，对两份文字的容器做动画，移动-50%

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>文字和图片连续轮播</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            text-align: center;
            padding-top: 100px;
        }
        /*文字轮播*/
        .c{
            overflow: hidden;
            border: 1px solid orange;
            display: inline-block;
            line-height: 40px;
        }
        .c.horizontal{
            width: 500px;
        }
        .c.vertical{
            height: 203px;
            padding: 0 40px;
        }
        .sc{
            animation: marquee 10s linear infinite;
            display: inline-block;
            white-space: nowrap;
        }
        .vertical .sc{
            animation: marqueev 6s linear infinite;
        }
        .sc:hover{
            animation-play-state: paused;
        }
        .c.horizontal .ss{
            display: inline-block;
        }
        .ss{
            color: #333;
        }
        @keyframes marquee {
            0%{
                transform: translate3d(0,0,0);
            }
            100%{
                transform: translate3d(-50%,0,0);
            }
        }
        @keyframes marqueev {
            0%{
                transform: translate3d(0,0,0);
            }
            100%{
                transform: translate3d(0,-50%,0);
            }
        }
        /*图片轮播*/
        .tech-slideshow {
            height: 200px;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            transform: translate3d(0, 0, 0);
        }
        .tech-slideshow > div {
            height: 200px;
            width: 2526px;
            background: url('./imgs/collage.jpg');
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            transform: translate3d(0, 0, 0);
        }
        .tech-slideshow .mover-1 {
            animation: moveSlideshow 60s linear infinite;
        }
        .tech-slideshow .mover-2 {
            opacity: 0;
            transition: opacity 0.5s ease-out;
            background-position: 0 -200px;
            animation: moveSlideshow 20s linear infinite;
        }
        .tech-slideshow:hover .mover-2 {
            opacity: 1;
        }
        @keyframes moveSlideshow {
            100% { 
                transform: translateX(-66.6666%);  
            }
        }
    </style>
</head>

<body>
    <div class="c horizontal"></div>
    <br /><br/>
    <br /><br/>
    <div class="c vertical"></div>
    <br /><br/>
    <br /><br/>
    <div class="tech-slideshow">
        <div class="mover-1"></div>
        <div class="mover-2"></div>
    </div>
    <script>
        buildMarquee();
        buildMarquee('vertical');

        //horizontal vertical
        function buildMarquee(direction='horizontal'){
            var wrap = document.querySelector('.c.'+direction);
            let text = `1111 本店所有商品全部白送; 2222 本店所有商品全部白送; 3333 本店所有商品全部白送;
            4444 本店所有商品全部白送; 5555 本店所有商品全部白送;`;
            if(direction == 'vertical'){
                text = text.split(';').map(it => `<p class="ss-item">${it}</p>`).join('');
            }
            let ss = `<div class="ss">${text}</div>`;
            wrap.innerHTML = `<div class="sc">${ss}${ss}</div>`;
        }
    </script>
</body>

</html>

2. 文字连续轮播

文字同样复制一份，对单份文字的容器做动画，移动-100%，更清晰。保证两份文字在同一行即可

<!doctype html>
<html>
<head>
    <title>LOOP</title>
    <style>
        @keyframes loop {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }
        .box {
            white-space: nowrap;
        }
        .scrollContent {
            width: 600px;
            display: inline-block;
            text-align: center;
            animation: loop 3s linear infinite;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="scrollContent">
            这是一段可以滚动的文本
        </div>
        <div class="scrollContent">
            这是一段可以滚动的文本
        </div>
    </div>
</body>
</html>

3. 文字连续轮播

使用影分身text-shadow，减少一个文字容器，更加简洁高效

<!doctype html>
<html>
<head>
    <title>LOOP</title>
    <style>
        @keyframes loop {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }
        .box {
            white-space: nowrap;
        }
        .scrollContent {
            color: rebeccapurple;
            width: 600px;
            display: inline-block;
            text-align: center;
            animation: loop 3s linear infinite;
            text-shadow: 600px 0 currentColor, 1200px 0 currentColor;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="scrollContent">
            这是一段可以滚动的文本
        </div>
    </div>
</body>
</html>

text-shadow和box-shadow一样，支持多重影分身。

text-shadow: 600px 0 currentColor, 1200px 0 currentColor, 1800px 0 currentColor, 2400px 0 currentColor;

4. 文字图标节奏轮播

父容器使用steps节奏动画，子元素使用连续动画，两个动画叠加产生节奏移动效果。

尾部补一个首元素，来实现连续滚动的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字图标节奏轮播</title>
    <style>
        *{
            padding:0;margin:0;
        }
        li{
            list-style:none;
        }
        body, html {
            width: 100%;
            height: 100%;
            display: flex;
        }
        /*水平轮播*/
        .horizontal {
            --w: 300;
            --speed: 3s;
            width: 300px;
            margin: auto;
            height: 36px;
            line-height: 36px;
            font-size: 20px;
            background: lightseagreen;
            color: #fff;
            overflow: hidden;
        }
        .horizontal ul {
            display: flex;
            flex-wrap: nowrap;
            animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
        }
        .horizontal ul li {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding-left: 10px;
            box-sizing: border-box;
            white-space: nowrap;
            cursor: pointer;
            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, 0px);
            }
            80%,
            100%  {
                transform: translate(calc(var(--w) * -1px), 0);
            }
        }
        /*垂直轮播*/
        .vertical {
            --s: 6;
            --h: 36;
            --speed: 1s;
            width: 300px;
            margin: auto;
            height: calc(var(--h) * 1px);
            line-height: calc(var(--h) * 1px);
            font-size: 20px;
            background: lightseagreen;
            color: #fff;
            overflow: hidden;
        }
        .vertical ul {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
            animation: moveh calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
        }
        .vertical ul li {
            flex-shrink: 0;
            width: 100%;
            padding-left: 10px;
            box-sizing: border-box;
            white-space: nowrap;
            cursor: pointer;
            animation: liMoveh calc(var(--speed)) infinite;
        }
        @keyframes moveh {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(0, calc(var(--s) * var(--h) * -1px));
            }
        }
        @keyframes liMoveh {
            0% {
                transform: translate(0, 0);
            }
            80%,
            100%  {
                transform: translate(0, calc(var(--h) * -1px));
            }
        }
        /*图片轮播*/
        :root {
            --w: 400;
            --speed: 1.5s;
        }
        .img-horizontal {
            width: 400px;
            margin: auto;
            height: 240px;
            line-height: 240px;
            font-size: 20px;
            background: #673ab7;
            color: #fff;
            overflow: hidden;
            border: 2px solid #000;
        }
        .img-horizontal ul {
            display: flex;
            flex-wrap: nowrap;
            animation: moveImg calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
        }
        .img-horizontal ul li {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            white-space: nowrap;
            cursor: pointer;
            animation: move1Img calc(var(--speed)) infinite;
        }
        .img-horizontal ul li img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        @keyframes moveImg {
            0% {
                transform: translate(0, 0px);
            }
            100% {
                transform: translate(calc(var(--s) * var(--w) * -1px), 0);
            }
        }
        @keyframes move1Img {
            0% {
                transform: translate(0, 0px);
            }
            80%,
            100%  {
                transform: translate(calc(var(--w) * -1px), 0);
            }
        }
    </style>
</head>
<body>
    <div class="g-container horizontal">
        <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>
    <br/><br/><br/><br/>
    <div class="g-container vertical">
        <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>
    <br/><br/><br/><br/>
    <div class="g-container img-horizontal">
        <ul style="--s: 4">
            <li>
                <img src="./imgs/m1.jpeg">
            </li>
            <li>
                <img src="./imgs/m2.jpeg">
            </li>
            <li>
                <img src="./imgs/m3.jpeg">
            </li>
            <li>
                <img src="./imgs/m4.jpeg">
            </li>
            <!--末尾补一个首尾数据-->
            <li>
                <img src="./imgs/m1.jpeg">
            </li>
        </ul>
    </div>
    <script>

    </script>
</body>
</html>

参考： CSS 实现轮播效果，根本不需要 JS

创建一个可以循环滚动的文本，可能没这么简单

posted @ 2023-09-07 15:46 全玉阅读(945) 评论(0) 编辑收藏举报

刷新页面返回顶部

全玉金生

跑马灯(文字和图片轮播)效果纯css实现

公告