CSS realizes background effects of haze siege
<!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>Smog, as the name suggests, is fog and haze. But there is a big difference between fog and haze. The aerosol system composed of particulate matter such as dust, sulfuric acid, and nitric acid in the air causes visual impairment called haze. Haze is haze (haze).
Fog is an aerosol system composed of large numbers of tiny water droplets or ice crystals suspended in the air near the ground. It mostly occurs in autumn and winter (which is also one of the reasons for the widespread haze weather in the country in January 2013), and is the product of condensation (or desublimation) of water vapor in the air near the ground. The presence of fog will reduce air transparency and make visibility worse. If the horizontal visibility of the target object is reduced to less than 1000 meters, the weather phenomenon of water vapor condensation (or condensate) suspended in the air near the ground is called fog (Fog). .
Haze (mái), also known as smog (smog) Particles such as dust, sulfuric acid, nitric acid, and organic hydrocarbons in the air can also make the atmosphere cloudy. The phenomenon that the horizontal visibility of the target is 1000-10000 meters is called mist or mist. The atmospheric humidity should be saturated when fog is formed (if a large number of condensation nuclei exist, the relative humidity may not necessarily reach 100% saturation). Because fog composed of liquid water or ice crystals scatters light that is not wavelength dependent, fog appears milky or bluish-white and gray.
Smog weather is a state of air pollution. Smog is a general expression for the excessive content of various suspended particles in the atmosphere, especially PM2.5 (particles with aerodynamic equivalent diameter less than or equal to 2.5 microns) are considered to cause haze. The "culprit" of the weather. With the deterioration of air quality, the occurrence of haze weather has increased, and the harm has increased. Many areas in China combine haze weather with fog as a warning and forecast for severe weather. Collectively referred to as "smog weather".
</span>
<h5>Beijing smog enters red time</h5>
<h5>In the process of heavy air pollution from December 7th to 10th, 2015, Beijing has launched orange and red warnings successively, and implemented the suspension of industrial enterprises, the suspension of construction sites, the driving of motor vehicles with odd and even numbers, primary and secondary schools and kindergartens. Suspension</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>
.