jquery实现天气预报麻烦吧html和css也带上

html-css020

jquery实现天气预报麻烦吧html和css也带上,第1张

这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式，包括下雨，闪电，白天，夜间和下雪。卡片使用扁平化风格，并使用CSS3帧动画来制作各种动画效果。

制作方法

HTML结构

该特效的HTML结构采用无序列表的HTML结构，其中每一个li.card元素代表一种卡片。

<ul class="card-list">

<li class="card">

<div class="card-color color-rain">

<div class="rain"></div>

</div>

<div class="card-info">

<p>63 ℉</p>

<p>low of 61 ℉</p>

</div>

</li>

......

</ul>

复制代码

CSS样式

首先给卡片一些基本样式。

.card {

描述有问题，我想知道你的这个图片是不是作为一个提示文字，比如“天气预报”，然后下面才是插入iframe到图片底下。当然这个图片和iframe是在一个单元格里面。如果是这样的，那么就比较好做，直接将你的iframe插入到img标签后面，如果担心没有换行显示，那么可以在图片后面加上一个<br/>然后才iframe。现在就是不知道你的图片是作为一个标题提示还是背景，只是看这命名，感觉是标题。