css实现手机图片滚动效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手机图片滚动</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .user {
            min-height: 808px;
        }

        .container {
            width: 1000px;
            margin: 0 auto;
        }


        .user_inner {
            min-height: 808px;
        }

        .iphone {
            width: 193px;
            height: 408px;
            background: url(./images/ui-phone.png) no-repeat;
            position: relative;
        }

        .iphone_inner {
            width: 167px;
            height: 295px;
            background-color: red;
            position: absolute;
            top: 57px;
            left: 14px;
            overflow: hidden;
        }

        .iphone_inner ul {
            width: 1169px;
            position: absolute;
            left: 0;
            top: 0;
            animation: move 15s linear infinite;
        }

        .iphone_inner ul li {
            float: left;
        }

        .iphone_inner ul li img {
            width: 167px;
            height: 295px;
        }
        .iphone_inner:hover ul {
            animation-play-state: paused;
        }
        @keyframes move {
            0% {
                left: 0;
            }
            
            10% {
                left:0;
            }

            16.66% {
                left: -167px;
            }

            26.66% {
                left: -167px;
            }

            33.33% {
                left: -334px;
            }

            43.33% {
                left: -334px;
            }

            50% {
                left: -501px;
            }

            60% {
                left: -501px;
            }

            66.66% {
                left: -668px;
            }

            76% {
                left: -668px;
            }

            83.33% {
                left: -835px;
            }

            93.33% {
                left: -835px;
            }

            100% {
                left: -1002px;
            }
        }
    </style>
</head>

<body>

    <!-- 注释 -->

    <!--[if lte ie8]>

        您的浏览器版本过低

    <![endif]-->


    <div class="user">
        <div class="user_inner container">
            <div class="iphone">
                <div class="iphone_inner">
                    <ul>
                        <li><img src="./images/ui01.jpg" alt=""></li>
                        <li><img src="./images/ui02.jpg" alt=""></li>
                        <li><img src="./images/ui03.jpg" alt=""></li>
                        <li><img src="./images/ui04.jpg" alt=""></li>
                        <li><img src="./images/ui05.jpg" alt=""></li>
                        <li><img src="./images/ui06.jpg" alt=""></li>
                        <li><img src="./images/ui01.jpg" alt=""></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

reset.css

@charset "utf-8";
/* CSS Document */
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

body,html{
	font:12px "微软雅黑",Arial;
	color:#737373;	
}
h1,h2,h3,h4,h5,h6,b,strong{
	font-weight:normal;
	font-size:100%;	
}
i,em{
	font-style:normal;	
}
li{
	list-style:none;	
}
a{
	text-decoration:none;
	color:#737373;	
}
input{
	outline:none;	
}
img{
	border:0;	
}
.clearfix{
	*zoom:1;	
}
.clearfix:after{
	content:' ';
	display:block;
	height:0;
	clear:both;
	overflow:hidden;
}

JackieDYH

发布了192 篇原创文章 · 获赞 30 · 访问量 2万+

私信关注

css实现手机图片滚动效果

猜你喜欢