circles实现滚动到可视区域显示进度条动画效果代码-html代码-BFW代码库

circles实现滚动到可视区域显示进度条动画效果代码

代码语言：html

所属分类：进度条

代码描述：circles实现滚动到可视区域显示进度条动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css">
    <style>
        body, html {
            font-size: 100%;
            padding: 0;
            margin: 0;
        }

        /* Reset */
        *,
        *:after,
        *:before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
        .clearfix:before,
        .clearfix:after {
            content: " ";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        body {

            font-weight: 500;
            font-size: 1.05em;
            font-family: "Microsoft YaHei","瀹嬩綋","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
        }
        a {
            color: #2fa0ec;
            text-decoration: none;
            outline: none;
        }
        a:hover,a:focus {
            color: #74777b;
        }

        .htmleaf-container {
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
        /* Header */
        .htmleaf-header {
            padding: 1em 190px 1em;
            letter-spacing: -1px;
            text-align: center;
            background: #66677c;
        }
        .htmleaf-header h1 {
            color: #D5D6E2;
            font-weight: 600;
            font-size: 2em;
            line-height: 1;
            margin-bottom: 0;
            font-family: "Microsoft YaHei","瀹嬩綋","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
        }
        .htmleaf-header h1 span {
            font-family: "Microsoft YaHei","瀹嬩綋","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
            display: block;
            font-size: 60%;
            font-weight: 400;
            padding: 0.8em 0 0.5em 0;
            color: #c3c8cd;
        }
        /*nav*/
        .htmleaf-demo a {
            color: #fff;
            text-decoration: none;
        }
        .htmleaf-demo {
            width: 100%;
            padding-bottom: 1.2em;
        }
        .htmleaf-demo a {
            display: inline-block;
            margin: 0.5em;
            padding: 0.6em 1em;
            border: 3px solid #fff;
            font-weight: 700;
        }
        .htmleaf-demo a:hover {
            opacity: 0.6;
        }
        .htmleaf-demo a.current {
            background: #1d7db1;
            color: #fff;
        }
        button {
            display: inline-block;
            margin: 0.5em;
            padding: 0.6em 1em;
            border: 3px solid #1d7db1;
            font-weight: 700;
            background-color: #fff;
        }
    </style>

    <style>
        #canvas .circle {
            display: inline-block;
            margin: 1em;
        }

        .circles-decimals {
            font-size: .4em;
        }
    </style>

    <style>
        #canvas .circle {
            display: inline-block;
            margin: 1em;
        }

        .circles-decimals {
            font-size: .4em;
        }
    </style>
</head>
<body>
<article class="htmleaf-container">


	
	<div class="container">
		<h1>圆形进度条在进入视口时才开始动画</h1>
		<h2>往下滚动页面查看效果</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dignissim eleifend justo a vestibulum. Quisque rutrum nec magna sit amet tristique. Donec magna magna, faucibus in enim id, malesuada volutpat justo. Etiam tellus tortor, aliquet vitae vestibulum quis, commodo auctor justo. Suspendisse pharetra egestas tempor. Ut tempus metus vel tincidunt mattis. Aliquam quis odio volutpat, interdum ante in, pulvinar purus. Aliquam auctor libero vitae ante vehicula efficitur. I.........完整代码请登录后点击上方下载按钮下载查看