【滑稽】每日一记 banner图

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>1920px banner图的宽度调整</title>
        <style type="text/css" >
        *{
            margin: 0;
            padding: 0;
        }
            #banner{
                width: 100%;  /*宽度为浏览器的100%*/
                height: 500px;  /*原则上,高度=图片高度*/
                overflow:hidden;
                position: relative;
            }
            
            #banner img{
                width: 1920px; /*宽度为图片的实际宽度*/
                height: 100%; /*高度充满父容器*/
                
                /*使用绝对定位,让图片在父容器中绝对居中*/
                position: absolute;
                left: 50%;
                margin-left: -960px;
            }
            
        </style>
    </head>
    <body>
        <div id="banner">
            <img src="../img/20170316023028862.jpg" />
        </div>
        
    </body>
</html>

 

 

用动画实现banner图的滚动：

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            
            #banner{
                width: 100%;
                height: 500px;
                overflow: hidden;
            }
            
            #banner_in{
                width: 7680px;
                height: 500px;
                position: relative;
                -webkit-animation: banner 8s ease infinite;
            }
            
            @-webkit-keyframes banner{
                /*0%{
                    left:0px
                }
                
                33%{
                    left: -1920px;
                }
                
                66%{
                    left: -3840px;
                }
                
                100%{
                    left: -5760px;
                }*/
                
                0%{
                    left: 0px;
                }
                10%{
                    left: 0px;
                }
                
                30%{
                    left: -1920px;
                }
                40%{
                    left: -1920px;
                }
                
                
                70%{
                    left: -3840px;
                }
                80%{
                    left: -3840px;
                }
                
                100%{
                    left: -5760px;
                }
            }
            
        </style>
    </head>
    
    <body>
        
        <div id="banner">
            <div id="banner_in">
                <img src="../img/banner1.png" /><!--
                --><img src="../img/banner2.png" /><!--
                --><img src="../img/banner3.png" /><img src="../img/banner1.png" />
            </div>
        </div>
        
    </body>
</html>

 

posted @ 2017-03-20 13:22  瓜皮猴  阅读(288)  评论(0)    收藏  举报