CSS3轮播图

CSS3轮播图_第1张图片CSS3轮播图_第2张图片

 

 

在一行中显示不换行::子级设置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轮播图)