<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动画展开天气预报特效 - 网页模板</title>
<style type="text/css">
html{height:100%;}
body{background:#fff;padding:0;text-align:center;font-family:'open sans';position:relative;margin:0;height:100%;}
a{text-decoration:none;}
.page-container{margin:50px auto 0 auto;position:relative;}
.flipout{text-align:center;}
.foc-main{display:inline-block;box-shadow:0 1px 5px rgba(0,0,0,0.15);}
.foc-card{background:#f8f8f8;border-left:1px solid #eee;}
.foc-main p{margin:0;color:#77BEFF;font-size:100px;line-height:140%;font-weight:100;}
.foc-card p{color:#CCC;margin-top:75px;margin-bottom:50px;font-size:50px;line-height:140%;font-weight:100;}
.foc-main .foc-card small{font-size:18px;}
.foc-main small{display:block;margin-top:15px;padding-top:15px;border-top:1px solid #EEE;color:#777;font-size:24px;font-style:italic;font-family:georgia;line-height:140%;font-weight:100;}
.foc-main .foc-card.foc-bottom p{margin-top:10px;margin-bottom:10px;}
.foc-main .foc-card.foc-bottom small{border-top:1px solid #ddd;margin-top:10px;padding-top:10px;}
</style>
<link href='css/flipout_cards.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flipout_cards.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flipout").flipout_cards();
});
</script>
</head>
<body>
<div class="page-container">
<div class="flipout">
<div class="foc-main">
<p>22°C</p>
<small>天气很热</small>
<small>看到更多的徘徊</small>
</div>
<div class="foc-left">
<p>40°C</p>
<small>明天是更糟。</small>
</div>
<div class="foc-left">
<p>46°C</p>
<small>下一个更糟。</small>
</div>
<div class="foc-right">
<p>46°C</p>
<small>下一个更糟。</small>
</div>
<div class="foc-right">
<p>50°C</p>
<small>不要出去。</small>
</div>
<div class="foc-bottom">
<p>50°C</p>
<small>不要出去。</small>
</div>
<div class="foc-bottom">
<p>50°C</p>
<small>不要出去。</small>
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery动画展开天气预报特效.zip
版权申诉
45 浏览量
2022-11-20
22:08:10
上传
评论
收藏 52KB ZIP 举报
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- java-leetcode题解之第102题二叉树的层序遍历.zip
- java-leetcode题解之第104题二叉树的最大深度.zip
- java-leetcode题解之第173题二叉搜索树迭代器.zip
- java-leetcode题解之第100题相同的树.zip
- java-leetcode题解之第101题对称二叉树.zip
- java-leetcode题解之第128题最长连续序列.zip
- java-leetcode题解之第94题二叉树的中序遍历.zip
- java-leetcode题解之第98题验证二叉搜索树.zip
- java-leetcode题解之第200题岛屿数量.zip
- java-leetcode题解之第130题被围绕的区域.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈