欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

HTML实现波浪效果

 

<div class="css-live-wrap">

<hgroup class="percentage-pie">

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">

<text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>

<!-- Wave -->

<g id="wave">

<path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 140.6 94.24 45.08 106.32 200 100 A 95 95 0 0 1 0 100 Z">

<animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;

M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;

M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>

</path>

</g>

<circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>

<circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle>

</svg>

</hgroup>

</div>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h36008.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-07-31 23:44 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。