HTML5 SVG天气预报图标动画效果

这是一款使用HTML5 SVG制作的天气预报图标动画效果。这组天气图标有下雨、晴天、阴天、大雾等，每一个图标都由SVG组成。

使用方法

在页面中引入样式文件style.css。

<link rel="stylesheet" type="text/css" href="css/style.css">
                

HTML结构

每一个天气图标都包含在div.svg-contain中，例如晴天的天气图标的HTML结构如下：

<div class="svg-contain">
    <svg version="1.1" class="clear-sky-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72.3 52.6" style="enable-background:new 0 0 72.3 52.6;" xml:space="preserve">
        <g>
            <path class="sun" d="M50.8,25.7c0,7.9-6.4,14.4-14.4,14.4s-14.4-6.4-14.4-14.4s6.4-14.4,14.4-14.4S50.8,17.8,50.8,25.7z"/>
            <path  class="line big-path line-1" d="M54.5,25.8h6"/>
            <path class="line big-path line-2" d="M12.4,25.8h6"/>
            <path class="line big-path line-3" d="M36.5,44.3v6"/>
            <path class="line big-path line-4" d="M36.5,8.2v-6"/>
            <path class="line big-path line-5" d="M23,38.8l-4.8,4.8"/>
            <path class="line big-path line-6" d="M54.9,8.9L50,13.8"/>
            <path class="line big-path line-7" d="M50,38.8l4.4,4.4"/>
            <path class="line big-path line-8" d="M18.8,9.6l4.2,4.2"/>
        </g>
    </svg>
</div>
                

所有天气图标的预览图如下：