zoukankan      html  css  js  c++  java
  • CSS0008: CSSDIV进度条样式

    1,CSS样式:

    .progress {
        margin-top: 2px;
        width: 200px;
        height: 14px;
        margin-bottom: 10px;
        overflow: hidden;
        background-color: #f5f5f5;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    }
    
    .progress-bar {
        background-color: rgb(92, 184, 92);
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent);
        background-size: 40px 40px;
        box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        display: block;
        float: left;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        transition-delay: 0s;
        transition-duration: 0.6s;
        transition-property: width;
        transition-timing-function: ease;
        width: 266.188px;
    }

    2,html代码:

    <div class="progress">
    <div class="progress-bar" style=" 40%"></div>
    </div>

    预览截图:

    琥珀君的博客
  • 相关阅读:
    响应式设计
    Flex box 弹性盒子布局
    下拉菜单  -
    html使用技巧
    nth-of-type(n)
    Js中 关于top、clientTop、scrollTop、offsetTop
    仿iPhone滑屏操作
    网页超过一页 点击回到顶部
    linux svn使用
    Linux查看CPU和内存使用情况
  • 原文地址:https://www.cnblogs.com/eliteboy/p/13235158.html
Copyright © 2011-2022 走看看