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

前端开发H5 canvas圆形进度条动画特效

2019-01-05 分类：HTML 阅读(813) 评论(0)
web前端开发技术介绍
前端开发技术jsp
web前端开发技术英文
<!DOCTYPE html>
<html lang=”zh”>
    <head>
        <meta charset=”UTF-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
        <title>HTML5 canvas带渐变色的圆形进度条动画</title>
        <link rel=”stylesheet” type=”text/css” href=”css/normalize.css” />
        <link rel=”stylesheet” type=”text/css” href=”css/default.css” />
        <link rel=”stylesheet” href=”css/page-styles.css” />
        <link
            href=”http://fonts.useso.com/css?family=Open+Sans:300″
            rel=” stylesheet”
        />
        <style>
            .circle {
                width: 150px;
                margin: 6px 60px 20px;
                display: inline-block;
                position: relative;
                text-align: center;
                line-height: 1.2;
            }
            .circle canvas {
                vertical-align: top;
            }
            .circle strong {
                position: absolute;
                top: 58px;
                left: 0;
                width: 100%;
                text-align: center;
                line-height: 40px;
                font-size: 30px;
                color: #fff;
            }
            .circle strong i {
                font-style: normal;
                font-size: 0.6em;
                font-weight: normal;
            }
            .circle span {
                display: block;
                color: #fff;
                margin-top: 12px;
                font-size: 16px;
            }
        </style>
        <!–[if IE]>
<script src=”http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js”></script&gt;
<![endif]–>
    </head>
    <body>
        <div class=”htmleaf-container”>
            <div class=”htmleaf-content bgcolor-8″>
                <div class=”circles”>
                    <div class=”first circle”>
                        <span
                            >no <br />
                            animation</span
                        >
                    </div>
                    <div class=”second circle”>
                        <strong></strong>
                        <span
                            >animation <br />
                            progress</span
                        >
                    </div>
                    <div class=”third circle”>
                        <strong></strong>
                        <span
                            >value <br />
                            progress</span
                        >
                    </div>
                    <div class=”forth circle”>
                        <strong></strong>
                        <span
                            >solid fill, <br />
                            custom angle</span
                        >
                    </div>
                </div>
            </div>
        </div>
        <script src=”http://libs.useso.com/js/jquery/1.11.0/jquery.min.js”>
            </script&gt;
            <script src=”dist/circle-progress.js”>
        </script>
        <script src=”js/examples.js”></script>
        <script>
                    $(‘.first.circle’).circleProgress({
                        value: 0.35,
                        animation: false,
                        fill: {
                            gradient: [‘#ff1e41’, ‘#ff5f43’]
                        }
                    });
                    /*
                    Example 2:
                    default gradient
                    listening to circle-animation-progress event and display the animation progress: from 0 to 100%
                    /
                    $(‘.second.circle’).circleProgress({
                    value: 0.6
                    }).on(‘circle-animation-progress’, function(event, progress) {
                    $(this).find(‘strong’).html(parseInt(100 progress) + ‘<i>%</i>’);
                    });
                    /*
                    Example 3:
                    very custom gradient
                    listening to circle-animation-progress event and display the dynamic change of the value: from 0 to 0.8
                    */
                    $(‘.third.circle’).circleProgress({
                        value: 0.75,
                        fill: {
                            gradient: [
                                [‘#0681c4’, .5],
                                [‘#4ac5f8’, .5]
                            ],
                            gradientAngle: Math.PI / 4
                        }
                    }).on(‘circle-animation-progress’, function (event, progress, stepValue) {
                        $(this).find(‘strong’).text(String(stepValue.toFixed(2)).substr(1));
                    });
            /*
            Example 4:
            solid color fill
            custom start angle
            custom line cap
            /
            $(‘.forth.circle’).circleProgress({
            startAngle: -Math.PI / 4 3,
            value: 1,
            lineCap: ’round’,
            fill: {
            gradient: [‘#ff1e41’, ‘#ff5f43’]
            }
            }).on(‘circle-animation-progress’, function(event, progress) {
            $(this).find(‘strong’).html(parseInt(80 * progress));
            });
        </script>
    </body>
</html>
前端开发 用到技术
前端开发主流技术
web前端开发技术第二版
赞(0)
前端开发者 » 前端开发H5 canvas圆形进度条动画特效
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论