一款纯css3实现的条纹加载条

之前为大家带来了很多加载动画。 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条。今天给大家分享一款纯css3实现的条纹加载条。带有响应式的效果。效果图如下 :

在线预览   源码下载

实现的代码。

html代码:

 <div class="container">
        <div class="warning">
        </div>
    </div>

css3代码:

    .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;
}
@-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;
  }
}
.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);
}

body, html {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
}

body {
  background-repeat: no-repeat;
  background-position: center;
  background-image: radial-gradient(circle, #c0e979, #96d923);
}

.container {
  width: 80vw;
  margin: 45vh auto 0;
}
.container .warning {
  height: 10vh;
}

via:http://www.w2bc.com/Article/18415

时间: 2024-10-25 14:25:43

一款纯css3实现的条纹加载条的相关文章

纯css3实现的动画加载条

之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrapper"> <div class="bar"> <p class="text"> Loading b

一款纯css3实现的动画加载导航

之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="main-menu"> <li class="main-menu-item active"><a href="#">Home</a></li><li class="m

16款纯CSS3实现的loading加载动画

分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="grid"> <div class="cell"> <div class="card"> <span class="spinner-loader">Loading…</span

纯css3实现的动画加载特效

之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="curve3"> </div> <div class="curve2"> <div class="text"> 15 </div> </di

7款纯CSS3实现的炫酷动画应用

1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分陶醉的样子,周围还会出现跳动的音符动画. 在线演示 源码下载 2.CSS3 Loading进度条加载动画特效 3款绚丽风格 今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的. 在线演示 源码下载 3.纯CSS3实现云雾缭绕动

一款纯css3实现的超炫3D表单

今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div id="face"> <div id="content"> <p> <input type="text" placeholder="Name" /></p>

一款纯css3实现的数字统计游戏

今天给大家分享一款纯css3实现的数字统计游戏.这款游戏的规则的是将所有的数字相加等于72.这款游戏的数字按钮做得很美观,需要的时候可以借用下.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <h1> CSS Counter Game</h1> <section> <h2> Pick the numbers that add up to 72:</h1> <input id="a" type=&q

一款纯css3实现的翻转按钮

之前为大家介绍了好多纯css3实现的很漂亮的按钮.今天小编要给各网友再分享一款纯css3实现的翻转按钮.实现中给出了两种的翻转特效,一种是基于按扭的左边缘为中心线,另一种是基于按钮的中间为中心线.我们一起看下效果图: 在线预览   源码下载 实现的代码 html代码: <article> <a target="_blank" class="btn-fold-1" href="http://www.w2bc.com"><

一款纯css3实现的机器人看书动画效果

今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class='szene'> <div class='image i1'> < HTML > <div class='nail'> </div> </div> <div class='image i2'&g