美文网首页Web 前端开发
非gif/video,用纯css3的做的动态背景图

非gif/video,用纯css3的做的动态背景图

作者: 矮子高 | 来源:发表于2017-03-08 10:03 被阅读0次

    本博客持续修改与更新中,点击这里查看最新的内容

    背景

    昨天迋reddit,在黑苹果版块上的导航背景图的非常有意思,乍一看还以为是gif或者是一个很小的video,审查后发现并不是,而是用的jpg和一张半透的png实现的。

    上图的云会动,图片太大,就不上gif了。。。 😎😎

    实现代码

    点些运行我的在线实例

    <iframe width='100%' height='400px' src='https://plnkr.co/edit/yMAQjhDZx28NIIpE9SQh?p=preview'></iframe>

    html:

    <!DOCTYPE html>
    <html>
    
      <head>
        <link rel="stylesheet" href="style.css">
      </head>
    
      <body>
       <div id='header'></div> 
      </body>
    
    </html>
    

    css

    /* Styles go here */
    
    #header {
        background: #000 url(//b.thumbs.redditmedia.com/AJsfKOOEw8Reo0o1DEb6XtdZcXXd6LseXWubRUS_D_M.jpg) center;
        height: 300px;
        border-bottom: 1px solid #7D7C7D;
        background-color: #FFF;
        overflow: hidden;
    }
    
    #header::after{
        pointer-events: none;
        content: " ";
        display: block;
        width: 1713px;
        height: 300px;
        position: absolute;
        top: 19px;
        opacity: 1;
        -webkit-transition-property: opactiy;
        transition-property: opactiy;
        -webkit-transition-duration: 5s;
        transition-duration: 5s;
        background-image: url(//b.thumbs.redditmedia.com/JOJvVsBp3R_xQx5IgkRfacpQRMBFju3HroJHC0PrZMA.png);
        -webkit-animation: cloudAnim 35s linear infinite;
        animation: cloudAnim 35s linear infinite;
    }
    
    
    @-webkit-keyframes cloudAnim {
        from {
            -webkit-transform: translateX(-1713px) translateZ(-1713px);
            transform: translateX(-1713px) translateZ(-1713px)
        }
    
        to {
            -webkit-transform: translateX(1713px) translateZ(-1713px);
            transform: translateX(1713px) translateZ(-1713px)
        }
    }
    
    @keyframes cloudAnim {
        from {
            -webkit-transform: translateX(-1713px) translateZ(-1713px);
            -ms-transform: translateX(-1713px) translateZ(-1713px);
            transform: translateX(-1713px) translateZ(-1713px)
        }
    
        to {
            -webkit-transform: translateX(1713px) translateZ(-1713px);
            -ms-transform: translateX(1713px) translateZ(-1713px);
            transform: translateX(1713px) translateZ(-1713px)
        }
    }
    

    相关文章

      网友评论

        本文标题: 非gif/video,用纯css3的做的动态背景图

        本文链接:https://www.haomeiwen.com/subject/yifbgttx.html