制作方法
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。现在就是不知道你的图片是作为一个标题提示还是背景，只是看这命名，感觉是标题。CSS3动画属性并不是很多，但重点其实是你怎样去运用它，从简单的hover状态或复杂的小动画，都可以巧妙的用CSS3动画属性来实现。今天主要是和大家分享一个比较有创意、实用的CSS天气图标动画，静态的天气图标看上去是很呆板，若加上动画，看起来会更加真实生动，以下例子就是很好的参考案例。
