HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 6958|回复: 0

[教程] css3之易拉罐滚动效果

[复制链接]
  • TA的每日心情
    奋斗
    2016-4-10 20:41
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    发表于 2015-11-11 21:47:47 | 显示全部楼层 |阅读模式
    本帖最后由 474569696 于 2015-11-11 21:49 编辑

    QQ图片20151111214608.png
    今天,我们来看一看易拉罐的滚动效果吧!请使用火狐浏览器查看
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <style type="text/css">
                .bg{
                    width: 197px;
                    height: 336px;
                    position: relative;
                    overflow: hidden;
                    z-index: 3;
                }
                .bg img{
                    width: 197px;
                    height: 336px;
                    z-index: 30;
                }
                .bgscroll{
                    background: url(coke-label.jpg) 0 0 repeat-x;
                    height: 280px;
                    left: 0px;
                    position: absolute;
                    top: 10px;
                    width: 197px;
                    animation: name 9s linear 0s infinite;
                    z-index: -1;
                }
                @-moz-keyframes name{
                    from{background-position: 0 0;}
                    to{background-position: -380px 0;}
                }
            </style>
            <div class="bg">
                <div class="bgscroll"></div>
                <img src="coke-can.png" />
            </div>
        </body>
    </html>


    coke-can.png
    coke-label.jpg

    HTML5中国微信

    小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

    GMT+8, 2017-1-17 21:08

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表