zoukankan      html  css  js  c++  java

  • css3 进度条

    来源：参考 bootstrap

    效果图：

    、

    code：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style type="text/css">
        .progress {
            height: 20px;
            margin-bottom: 20px;
            overflow: hidden;
            background-color: #f5f5f5;
            border-radius: 4px;
            box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
        }
        .progress-bar{
            animation: progress-bar-stripes 2s linear infinite;
            background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
            background-size: 40px 40px;
        }

        .progress-bar {
            height: 100%;
            color: #fff;
            background-color: #5cb85c;
            box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
            transition: width .6s ease;
        }

        @keyframes progress-bar-stripes {
          from  { background-position: 40px 0; }
          to    { background-position: 0 0; }
        }
    </style>
</head>
<body>
    <div class="progress">
        <div class="progress-bar"  style=" 40%;"></div>
    </div>
</body>
</html>

    知识点：animation ，transition
  • 相关阅读:
    MyBatis总结(一)
    MyBatis简介
    数据持久化与ORM
    主流框架介绍
    JSP数据交互(一)
    tomcat端口被占用
    动态网页开发基础
    jQuery内容
    正则表达式
    初始Mybatis
  • 原文地址：https://www.cnblogs.com/y112102/p/10254050.html
Copyright © 2011-2022 走看看