绿色条纹css3进度条代码
2015-10-12 15:14
615 查看
<!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> | |
相关文章推荐
- HTML/CSS (四)伪代码可能导致内存越界或者抛出异常
- 浏览器缓存js css等文件
- CSS position绝对定位absolute relative
- HTML/CSS(四)css 中的static float relative absolute区别
- Hexo博客主题NexT使用自定义的CSS样式
- css3 动画
- 关于CSS样式的引用
- css相关解释
- CSS定位
- CSS框模型
- css+html简单的布局demo
- css 浮动原理
- 使用CSS3线性渐变实现图片闪光划过效果
- css margin auto 水平居中
- css3实现元素水平垂直居中
- css position
- JS+CSS实现Dock menu(Mac菜单导航效果)
- css纯代码实现圆边框和圆按钮
- 获取css的属性对应的值(适用各种浏览器)
- css制作三角形