找回密码
当前位置：前端开发者 > 教程 > 正文

前端 svg 如何 开发 圆环加载

2018-07-27 分类：教程 阅读(923) 评论(0)

前端开发如何测试不同分辨率下的效果|零基础web前端开发学员|gs前端开发岗位职责

开发项目时，两次用到了圆环的加载动画，涉及到了stroke-dasharray、stroke-dashoffset两个属性，http://www.w3cschool.cc/svg/svg-stroke.html 这里有简单介绍，我就不在此重复，
path(或其它形状元素如圆、矩形等)上面fill这个属性很重要，设置成none大家都懂的，什么都没有，这样设置stroke-width（边框宽度）圆环就出来鸟~

再详细嘛~ 其实很多很多，在此不多例举，直接上代码，这些属性都是css属性，那必然CSS3的keyframes可以使用，同理js也可以控制css属性，所以怎么用怎么玩就看个人需求了~（还是REM布局，可放大缩小，适应主流全部手机分辨率）

代码片段 1

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html manifest=”cache.manifest”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
    <meta name=”viewport” content=”initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no”>
    <style>
        .progress {
            width: 9.55rem;
            height: 9.55rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -4.77rem 0 0 -4.77rem
        }
        .percent {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5rem;
            height: 4rem;
            margin: -2rem 0 0 -2.5rem
        }
        .percent p {
            color: #EB6200;
            text-align: center;
            font-size: 1.3rem
        }
        .percent h1,
        .percent h2 {
            text-align: center;
            line-height: 1.2rem
        }
        .progress svg {
            width: 9.55rem;
            height: 9.55rem;
        }
        .progress svg path {
            stroke: #EB6200;
            stroke-width: 4;
            opacity: 1;
            fill: none;
            -webkit-transition: stroke-dashoffset 0.3s;
            transition: stroke-dashoffset 0.3s;
            -webkit-animation: dash 2s linear forwards;
        }
        @-webkit-keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>
<body>
    <div class=”progress”>
        <div class=”percent”>
            <p>100%</p>
        </div>
        <svg class=”progress-circle” width=”70″ height=”70″ viewBox=”-0 -0 70 70″>
            <path d=”m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z”
             style=”stroke-dasharray: 204.243713378906px; stroke-dashoffset: 204.243713378906px;”>
            </path>
        </svg>
    </div>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = (20 * (clientWidth / 320)) > 40 ? 40 + “px” : (20 * (clientWidth / 320)) + ‘px’;
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener(‘DOMContentLoaded’, recalc, false);
            function percent() {
                var i = document.querySelector(“.percent > p”),
                    time = 0,
                    interval = setInterval(function () {
                        time += 1;
                        i.innerHTML = time + “%”;
                        if (time >= 100) {
                            clearInterval(interval)
                        }
                    }, 20);
            }
            percent()
        })(document, window);
    </script>
</body>
</html>

web前端开发就业怎样|java前端开发和后端开发区别|mac上前端开发装

赞(0)
前端开发者 » 前端 svg 如何 开发 圆环加载
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论