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>
.
相关推荐
标题中的“JQUERY跟CSS3卡通动态背景特效”是指一种结合了jQuery库和CSS3技术的网页动画效果，主要用于创建吸引人的产品宣传或app下载引导页。这种特效通常包括动态的背景元素，如移动、旋转、缩放或颜色变化，为...
CSS3实现波纹特效和H5实现动态波浪效果是前端网页设计中常见的视觉表现形式，主要通过CSS3的相关属性和方法来创建动态和富有美感的视觉效果，以下详细说明这些知识点。 首先，CSS3是HTML5的主要样式表语言，其通过...
CSS3作为现代网页设计的重要工具，提供了丰富的样式控制功能，使得实现全屏背景特效变得简单而高效。本教程将深入探讨如何利用CSS3来创建一个图片全屏背景特效。 首先，我们需要了解CSS3中的背景属性，例如`...
在本文中，我们将深入探讨如何使用CSS3来创建动态背景的登录表单特效，并结合JavaScript实现登录成功后的欢迎切换提示。这些技术对于提升网站用户体验至关重要，尤其在网页交互设计方面。 首先，CSS3（Cascading ...
在创建动态特效背景时，CSS可以用来定义背景的颜色、图像、视频，甚至复杂的动画。例如，使用CSS3的`@keyframes`规则，你可以创建自定义动画，使背景元素按照预设路径移动或改变颜色。此外，CSS3的过渡（transition...
通过巧妙地运用CSS和JavaScript，我们可以让网页的背景图像产生各种动态效果，如滚动、淡入淡出、移动或循环播放等。下面将详细介绍如何利用JS实现动态背景图效果。 首先，我们需要了解基本的HTML和CSS知识。HTML...
在本文中，我们将深入探讨如何使用CSS3和SVG技术创建一款独特且吸引人的网页底部波浪动画背景特效。这个特效可以为网站增添视觉吸引力，使用户界面更具动态感。 首先，CSS3（Cascading Style Sheets Level 3）是...
【标题】"CSS3 SVG渐变网页动态背景特效.rar"是一个包含使用CSS3和SVG技术实现的网页背景动态渐变效果的资源包。这个特效代码能够为网站增添视觉吸引力，提高用户体验，同时允许用户根据需求进行二次修改，以适应...
本文将详细介绍如何使用CSS3来实现这种逼真的3D星空背景动画特效。 首先，CSS3中的3D变换是实现这种效果的关键。通过使用`transform`属性，我们可以对元素进行旋转、缩放和平移等3D操作。在创建星空背景时，通常会...
此外，HTML5还引入了离线存储（Web Storage）和媒体元素（如`<audio>`和`<video>`），使我们能够实现背景音乐或视频与星空动态效果的结合。 接着，CSS（Cascading Style Sheets）则是用来控制网页样式的语言。在...
总的来说，"纯CSS3大海蓝天动画背景特效"展示了CSS3的强大动画能力，提供了一种无需JavaScript即可实现动态视觉效果的方法，对于网页设计师和前端开发者来说，这是一个学习和借鉴的好案例。通过理解和应用这些技术，...
"纯css3背景渐变按钮特效" 描述进一步强调了这个资源是完全依赖CSS3来创建动态和美观的按钮背景渐变效果。这通常意味着没有使用JavaScript或者其他编程语言，仅通过CSS3的样式规则实现了按钮的动画和视觉变换，使得...
【标题】"CSS3斜线条动态背景动画特效.zip...总的来说，这个压缩包提供了一个利用CSS3强大功能和jQuery便捷性实现的动态背景特效实例，对于学习和实践现代Web开发技术，尤其是提升网页视觉效果，具有很高的参考价值。
在本资源包“CSS3实现图片全屏背景特效.zip”中，包含了一系列使用CSS3实现全屏背景特效的示例。这些示例通过HTML、CSS和JavaScript（特别是jQuery）技术来构建，旨在帮助开发者创建引人注目的网页视觉效果。下面...
总之，CSS3的线性渐变和动画功能为我们提供了丰富的工具，可以创建出各种各样的动态背景特效。结合多种颜色的渐变和自定义动画，我们可以轻松地为网页增加视觉吸引力，提升用户体验。对于网页设计师来说，熟练掌握...
在IT行业中，前端开发往往需要创造出引人入胜的用户体验，而"炫酷科幻粒子动态背景后台登录特效代码"正是为了实现这一目标而设计的。这个特效代码集成了JavaScript（js）技术，用于构建一种独特且吸引人的登录界面，...
js实现动态闪电特效，等离子背景，科幻片既视感，小白必看！ js实现动态闪电特效，等离子背景，科幻片既视感，小白必看！ js实现动态闪电特效，等离子背景，科幻片既视感，小白必看！ js实现动态闪电特效，等离子...
在本示例中，“HTML5动态散花背景特效”是一个利用HTML5技术实现的网页装饰元素，旨在为网站或博客增添视觉吸引力。 首先，这个特效的核心在于JavaScript，HTML5的一个重要组成部分。JavaScript允许开发者创建交互...
我们将分析标题"CSS3动态文字与背景同时切换特效"以及描述中提及的"纯CSS3实现文字拼凑动画切换特效下载"。 首先，CSS3是 Cascading Style Sheets（层叠样式表）的第三版，它引入了许多新的功能和特性，使得网页...
总的来说，"HTML5动态线条背景特效代码"是一个结合了HTML5、CSS3和JavaScript技术的创新应用，它为网页设计提供了富有创意的背景效果。这种特效可以用于网站的头部、底部或者其他任何需要增加视觉吸引力的地方，提升...