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

当前位置:主页 > Html5库 > SVG > HTML5 SVG天气预报图标动画效果
HTML5 SVG天气预报图标动画效果
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-02-05
    阅读:
麦子学院
简要教程

这是一款使用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>
                

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

SVG天气图标

网友评论