用CSS代碼編寫簡易輪播圖

時間 2019-12-25
標籤 css 代碼編寫簡易欄目 CSS 简体版
原文原文鏈接
廢話很少說，直接上代碼css
<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .container{
                width: 1000px;
                height: 500px;
                margin: 50px auto;
                overflow: hidden;
                background: skyblue;
                
            }
            .flex{
                display: flex;
            }
            .item-box{
                animation: my-css 5s infinite;
                -webkit-animation: my-css 5s infinite;
                -o-animation: my-css 5s infinite;
                -moz-animation: my-css 5s infinite;

                animation-direction: alternate;
                -webkit-animation-direction: alternate;
                -o-animation-direction: alternate;
                -moz-animation-direction: alternate;
                
            }
            .item-box:hover{
                animation-play-state: paused;
                -webkit-animation-play-state: paused;
                -o-animation-play-state: paused;
                -moz-animation-play-state: paused;
            }
            .item-box div{
                width: 1000px;
                height: 450px;
                flex-shrink: 0;
            }
            .item1{
                
                background: pink;
            }
            .item2{
                
                background: brown;
            }

            .item3{
                
                background: red;
            }
            .item4{
                
                background: yellow;
            }
            .item5{
                
                background: green;
            }
            @keyframes my-css{
                0%   {
                    transform: translate(0%);
                }
                25%  {
                    transform: translate(-100%);
                }
                50%  {
                    transform: translate(-200%);
                }
                75%  {
                    transform: translate(-300%);
                }
                100%  {
                    transform: translate(-400%);
                }

            }
            @-webkit-keyframes my-css{
                0%   {
                    transform: translate(0%);
                }
                25%  {
                    transform: translate(-100%);
                }
                50%  {
                    transform: translate(-200%);
                }
                75%  {
                    transform: translate(-300%);
                }
                100%  {
                    transform: translate(-400%);
                }
            }
            @-o-keyframes my-css{
                0%   {
                    transform: translate(0%);
                }
                25%  {
                    transform: translate(-100%);
                }
                50%  {
                    transform: translate(-200%);
                }
                75%  {
                    transform: translate(-300%);
                }
                100%  {
                    transform: translate(-400%);
                }
            }
            @-moz-keyframes my-css{
                0%   {
                    transform: translate(0%);
                }
                25%  {
                    transform: translate(-100%);
                }
                50%  {
                    transform: translate(-200%);
                }
                75%  {
                    transform: translate(-300%);
                }
                100%  {
                    transform: translate(-400%);
                }
            }
            .ico-box{
                width: 30%;
                height: 30px;
                justify-content: space-around;
                align-items: center;
                margin: 10px auto;
            }
            .ico-box div{
                height: 10px;
                width: 20px;
                border-radius: 10px;
                background: #fff;
                transition: width 0.5s;
            }
            .ico-box div:hover{
                width: 40px;
                background: pink;
            }               
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item-box flex">
                <div class="item1"></div>
                <div class="item2"></div>
                <div class="item3"></div>
                <div class="item4"></div>
                <div class="item5"></div>
            </div>
            <div class="ico-box flex">
                <div class="ico"></div>
                <div class="ico"></div>
                <div class="ico"></div>
                <div class="ico"></div>
                <div class="ico"></div>
            </div>
        </div>
    </body>
</html>