当前位置：首页 > 网页特效 > svg

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

分类：svg 日期：2024-05-14 点击(2) 评论(0)

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

简介

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

```html
<link rel="stylesheet" type="text/css" href="css/style.css">
```
#####  HTML结构
每一个天气图标都包含在div.svg-contain中，例如晴天的天气图标的HTML结构如下：

```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>
            <path  class="line big-path line-1" d="M54.5,25.8h6"></path>
            <path class="line big-path line-2" d="M12.4,25.8h6"></path>
            <path class="line big-path line-3" d="M36.5,44.3v6"></path>
            <path class="line big-path line-4" d="M36.5,8.2v-6"></path>
            <path class="line big-path line-5" d="M23,38.8l-4.8,4.8"></path>
            <path class="line big-path line-6" d="M54.9,8.9L50,13.8"></path>
            <path class="line big-path line-7" d="M50,38.8l4.4,4.4"></path>
            <path class="line big-path line-8" d="M18.8,9.6l4.2,4.2"></path>
        </g>
    </svg>
</div>
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果