纯css3实现的优酷轮播图效果

最新推荐文章于 2021-06-04 07:03:58 发布

煮酒论code

最新推荐文章于 2021-06-04 07:03:58 发布

阅读量383

点赞数 1

分类专栏： html前端

本文链接：https://blog.csdn.net/qq_29766643/article/details/88553129

版权

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优酷轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            border:0;
        }
        ol, ul ,li{list-style: none;}
        /* 盒子样式 */
        .wrapper {
            position: relative;
            width: 800px;
            /*500 + 200 + 200*/
            height: 300px;
            margin:  0 auto;
            overflow: hidden;
        }
        .wrapper .move {
            position: absolute;
            top: 50%;
            width: 200px;
            float: left;
            opacity: 0.4;
            left: 900px;
            z-index: 1;
            height:0px;
            margin-top:0px;
        }
        .wrapper .move img {
            width: 100%;
            height: 100%;
        }
        .wrapper .move:nth-child(1) {
            animation: start1 5s ease-in-out infinite;
        }
        .wrapper .move:nth-child(2) {
            animation: start2 5s ease-in-out infinite;
        }
        .wrapper .move:nth-child(3) {
            animation: start3 5s ease-in-out infinite;
        }
        .wrapper .move:nth-child(4) {
            animation: start4 5s ease-in-out  infinite;
        }
        .wrapper .move:nth-child(5) {
            animation: start4 5s ease-in-out 1s infinite;
        }
        @keyframes start1 {
            0% {
                top:50%;
                margin-top:-60px;
                height:120px;