先上效果图
在复习&学习使用H5开发的过程中，第一个动画控件就是模仿 Android 原生的 ProgressBar.
html 代码
<body bgcolor="white"
style="
background: url('../imgs/daily.jpg') no-repeat center 0px;
background-size: cover;
background-position: center 0;">
<div id="drawing" style="right:0; position:absolute">
<p style="position:absolute;font-size:33px;top:20px;left:42px">跳过</p>
</div>
<div id="drawing1" style="right:0; position:absolute;">
<svg width="150px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="75" cy="75" r="50" stroke-width="4" stroke="red" fill="none" class="circle-load-svg"></circle>
</svg>
</div>
<script>
function drawCircle(name, color){
var draw = SVG(name).size(150, 150);
draw.circle(100).attr({ fill: 'transparent'}).attr({stroke: color}).attr({'stroke-width': 4}).attr({cx: 75}).attr({cy: 75});
}
drawCircle('drawing', 'white');
</script>
</body>CSS 代码
.circle-load-svg { stroke-dasharray: 0 360; animation:rot 5s linear forwards; }
@keyframes rot{ 100%{ stroke-dasharray: 360 360; } }
@-webkit-keyframes rot{ 100%{ stroke-dasharray: 360 360; } }
@-o-keyframes rot{ 100%{ stroke-dasharray: 360 360; } }
@-moz-keyframes rot{ 100%{ stroke-dasharray: 360 360; } }
OVER & 缺陷：这个动画效果只能在大于 5.0 的 Android 系统上才有用，低于 5.0 只会显示一个静态的红色圆圈
等H5的app做的差不多了，再上链接。
扫一扫
9398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
