css3动态进度条
2015-10-23 23:11
597 查看
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>
效果
相关文章推荐
- 201510232153_《CSS——去除浮动推荐方式》
- CSS控制表格——制作日历
- 深入理解CSS3 Animation 帧动画(转)
- CSS截取字符串
- CSS 框模型和定位
- 手机web——自适应网页设计(html/css控制)
- css3 rem如何使用
- 使用css样式来控制XML
- 字典样式 NSString 转化为 NSDictinary
- 总结css中单位px和em,rem的区别
- animate.css 动画制作
- html列表样式
- CSS实现三角形方法二--border+content
- 控制样式垂直剧中,float为何会让外部容器高度塌陷?
- CSS3中-moz、-ms、-webkit和-o分别代表什么意思
- CSS实现三角形方法一--rotate+relative
- css3中的伪元素
- CSS 伪类与伪元素
- CSS中强大的EM
- 怎么能让div标签里面的p自动换行 [问题点数:30分,结帖人alleni123]