CSS实现动态背景特效

zyhui

2018-02-22

CSS实现雾霾围城背景特效

<!DOCTYPE html>
<html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        @keyframes clouds-loop-1 {
               to {
                   background-position: -1000px 0;
               }
           }

    .clouds-1 {
        background-image: url("http://s.cdpn.io/15514/clouds_2.png");
        animation: clouds-loop-1 20s infinite linear;
    }

    @keyframes clouds-loop-2 {
        to {
            background-position: -1000px 0;
        }
    }

    .clouds-2 {
        background-image: url("http://s.cdpn.io/15514/clouds_1.png");
        animation: clouds-loop-2 15s infinite linear;
    }

    @keyframes clouds-loop-3 {
        to {
            background-position: -1579px 0;
        }
    }

    .clouds-3 {
        background-image: url("http://s.cdpn.io/15514/clouds_3.png");
        animation: clouds-loop-3 17s infinite linear;
    }

    html, body {
        font-family: sans-serif;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    body {

        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #000000));
        background: -moz-linear-gradient(#333333, #000000);
        background: -webkit-linear-gradient(#333333, #000000);
        background: linear-gradient(#333333, #000000);
        font-family: 'microsoft yahei', Arial, sans-serif;
        padding: 20px;
        background: #333333;

    }

    body, body a {
        color: #cccccc;
    }

    h1.quote {
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        display: inline-block;
        vertical-align: middle;
        *vertical-align: auto;
        *zoom: 1;
        *display: inline;
        text-align: right;
        text-decoration: none;
        font-weight: normal;
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 1.5em;
        line-height: 1.5em;
        margin: 0;
        text-shadow: 0 -1px 0 #ffffff, 0 2px 3px #000000;
    }

    h1.quote span {
        display: block;
    }

    section.info {
        position: absolute;
        bottom: 0;
        right: 2ch;
        font-size: 60%;
    }

    section.info dl {
        display: -webkit-flex;
        display: flex;
    }

    section.info dl dt, section.info dl dd {
        margin: 0;
        padding: 0;
    }

    section.info dl dt {
        padding-right: 1ch;
    }

    section.info dl dd {
        padding-right: 4ch;
    }

    .clouds {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
        opacity: 0.4;
        pointer-events: none;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
    }

    .clouds-1,
    .clouds-2,
    .clouds-3 {
        background-repeat: repeat-x;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 500px;
    }
    </style>
</head>
<body><h3 class="quote"></h3>
<h3 class="quote">
    <span>雾霾</span>
</h3>
  <span>雾霾，顾名思义是雾和霾。但是雾和霾的区别很大。空气中的灰尘、硫酸、硝酸等颗粒物组成的气溶胶系统造成视觉障碍的叫霾。霾就是灰霾（烟霞）。

雾是由大量悬浮在近地面空气中的微小水滴或冰晶组成的气溶胶系统。多出现于秋冬季节（这也是2013年1月份全国大面积雾霾天气的原因之一），是近地面层空气中水汽凝结（或凝华）的产物。雾的存在会降低空气透明度，使能见度恶化，如果目标物的水平能见度降低到1000米以内，就将悬浮在近地面空气中的水汽凝结（或凝华）物的天气现象称为雾（Fog）。

霾（mái），也称灰霾（烟雾） 空气中的灰尘、硫酸、硝酸、有机碳氢化合物等粒子也能使大气混浊。将目标物的水平能见度在1000－10000米的这种现象称为轻雾或霭（Mist）。形成雾时大气湿度应该是饱和的(如有大量凝结核存在时，相对湿度不一定达到100%就可能出现饱和)。由于液态水或冰晶组成的雾散射的光与波长关系不大，因而雾看起来呈乳白色或青白色和灰色。

雾霾天气是一种大气污染状态，雾霾是对大气中各种悬浮颗粒物含量超标的笼统表述，尤其是PM2.5（空气动力学当量直径小于等于2.5微米的颗粒物）被认为是造成雾霾天气的“元凶”。随着空气质量的恶化，阴霾天气现象出现增多，危害加重。中国不少地区把阴霾天气现象并入雾一起作为灾害性天气预警预报。统称为“雾霾天气”。

</span>


<h5>北京雾霾进入红色时间</h5>
<h5>2015年12月7日至10日的空气重污染过程，北京先后启动了橙色、红色预警，实施了工业企业停限产、施工工地停工、机动车单双号行驶、中小学和幼儿园停课</h5>
<div class="clouds">
    <div class="clouds-1"></div>
    <div class="clouds-2"></div>
    <div class="clouds-3"></div>
</div>

<script src="//cdn.gbtags.com/prefixfree/1.0.7/prefixfree.min.js"></script>
<script type="text/javascript">/*Javascript代码片段*/</script>
</body>
</html>

background css