zoukankan      html  css  js  c++  java
  • css3动态进度条

    html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>绿色条纹css3</title>
    
    <style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    html,body {
        background-repeat: no-repeat;
        background-position: center;
        background-image: radial-gradient(circle, #c0e979, #96d923);
        height:100%;
        position:absolute;
        width:100%
    }
    
    .container {
      width: 80vw;
      margin: 45vh auto 0;
    }
    .container .warning {
      height: 10vh;
    }
    .warning {
        position: relative;
        background-color: #6DA807;
        border: 1px solid #6DA807;
        border-radius: 10px;
        box-shadow: 1vw 3vh 10vh rgba(109, 168, 7, 0.8);
        background-size: 3em 3em;
        background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #96D923 0.9em, #96D923 2.1em, transparent 2.1em, transparent 2.9em, #96D923 3.1em);
        -webkit-animation: warning-animation 750ms infinite linear;
        -moz-animation: warning-animation 750ms infinite linear;
        animation: warning-animation 750ms infinite linear;
    }
    .warning:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      border-radius: 10px;
      background-image: linear-gradient(to bottom, #6DA807, rgba(171, 226, 77, 0.6) 15%, transparent 60%, #6DA807);
    }
    
    @-webkit-keyframes warning-animation {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 3em 0;
      }
    }
    @-moz-keyframes warning-animation {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 3em 0;
      }
    }
    @keyframes warning-animation {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 3em 0;
      }
    }
    </style>
    </head>
    <body>
    
    
    <div class="container">
        <div class="warning"></div>
    </div>
    
    </body>
    </html>

     效果

     
  • 相关阅读:
    在IE和Firfox获取keycode
    using global variable in android extends application
    using Broadcast Receivers to listen outgoing call in android note
    help me!virtual keyboard issue
    using iscroll.js and iscroll jquery plugin in android webview to scroll div and ajax load data.
    javascript:jquery.history.js使用方法
    【CSS核心概念】弹性盒子布局
    【Canvas学习笔记】基础篇(二)
    【JS核心概念】数据类型以及判断方法
    【问题记录】ElementUI上传组件使用beforeupload钩子校验失败时的问题处理
  • 原文地址:https://www.cnblogs.com/wzzl/p/4905935.html
Copyright © 2011-2022 走看看