CSS3轮播图

2020-01-15 16:01:39 作者：互联网

在一行中显示不换行：：子级设置display:inline-block，父级设置word-break: normal强制不换行；

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>c3轮播图</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .all{
            width: 795px;
            height: 450px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: calc(50% - 400px);
            overflow: hidden;    
        }
        ul{
            width: 5600px;
            word-break: normal;
            animation: run 21s linear alternate infinite;
        }
        li{
            display: inline-block;
            margin-left: -5px;
        }
        img{
            width: 800px;
            height: auto;
        }
        @keyframes run{
            from{
                transform: translateX(0);
            }
            7.15%{
                transform: translateX(0);
            }
            14.3%{
                transform: translateX(-800px);
            }
            21.45%{
                transform: translateX(-800px);
            }
            28.5%{
                transform: translateX(-1600px);
            }
            35.65%{
                transform: translateX(-1600px);
            }
            42.8%{
                transform: translateX(-2400px);
            }
            49.95%{
                transform: translateX(-2400px);
            }
            57.1%{
                transform: translateX(-3200px);
            }
            64.25%{
                transform: translateX(-3200px);
            }
            71.4%{
                transform: translateX(-4000px);
            }
            78.55%{
                transform: translateX(-4000px);
            }
            85.7%{
                transform: translateX(-4800px);
            }
            92.85%{
                transform: translateX(-4800px);
            }
            100%{
                transform: translateX(-4800px)
            }
        }
    </style>
</head>
<body>
    <div class="all">
        <ul>
            <li><img src="timg.jpg"/></li>
            <li><img src="timg (1).jpg"/></li>
            <li><img src="time(2).jpg"/></li>
            <li><img src="timg (3).jpg"/></li>
            <li><img src="timg (4).jpg"/></li>
            <li><img src="timg (5).jpg"/></li>
            <li><img src="timg(6).jpg"/></li>
        </ul>
    </div>
</body>
</html>

标签：CSS3,translateX,轮播,4800px,50%,transform,width,800px
来源： https://www.cnblogs.com/yang1997/p/12195704.html