div+css实现逼真天气预报动画卡片翻转效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：div+css实现逼真天气预报动画卡片翻转效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
  
<style>
body{
	margin:0;
	color:#444;
	background-color:#333366;
	font:300 14px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

@font-face{
	font-family:'iconvault';
	src:url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
	font-weight:normal;
	font-style:normal;
}
[class^="icon-"],
[class*=" icon-"]{
	font-family:'iconvault';
	font-style:normal;
	font-weight:normal;
	text-decoration:inherit;
	-webkit-font-smoothing:antialiased;
 }
.basecloud:before,
.windyraincloud:before,
.windysnowcloud:before,
.basethundercloud:before{font-family:'iconvault';font-style:normal;position:absolute;color:#ccc}
.basecloud:before{content:'\f105'}
.windyraincloud:before{content:'\f111'}
.windysnowcloud:before{content:'\f109'}
.basethundercloud:before{content:'\f105'}

.icon-thunder:before{content:'\f114';position:absolute;color:#ffa500}
.icon-sunny:after{content:'\f101';color:#ffa500;position:absolute}
.icon-drizzle:before{content:'\f10a';color: #82b2e4;position:absolute}
.icon-hail:before{content:'\f10f';position:absolute;color:#ccc}
.icon-showers:before{content:'\f104';position:absolute;color:#82b2e4}
.icon-rainy:before{content:'\f107';position:absolute;color:#4681c3}
.icon-snowy:before{content:'\f10b';position:absolute;color:#acd3f3}
.icon-frosty:before{content:'\f102';position:absolute;color:#85d8f7}
.icon-windy:before{content:'\f115';position:absolute;color:#ccc}
.icon-windyrain:before{content:'\f10e';position:absolute;color:#acd3f3}
.icon-windysnow:before{content:'\f103';position:absolute;color:#acd3f3}
.icon-sleet:before{content:'\f10c';position:absolute;color:#acd3f3}
.icon-moon:after{content:'\f10d';color:#ffa500;position:absolute}
.icon-night:after{content:'\f100'.........完整代码请登录后点击上方下载按钮下载查看