一款纯css3实现的条纹加载条
css3 实现 加载 一款
2023-09-27 14:28:19 时间
之前为大家带来了很多加载动画。 基于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; }
相关文章
- CSS3 3D 行星运转以及浏览器渲染原理
- 理解CSS3 transform中的Matrix(矩阵)
- css3动画从入门到精通
- CSS3 @media编写响应式页面
- 使用 jQuery & CSS3 实现优雅的手风琴效果
- 15款免费的 HTML5/CSS3 响应式网页模板
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十】
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
- 基于HTML5/CSS3可折叠的3D立方体动画
- 30款css3实现的鼠标经过图片显示描述特效
- 纯css3实现的动画加载特效
- 2014圣诞节一款纯css3实现的雪人动画特效
- html5和css3实现的3D滚动特效
- 纯css3实现的win8加载动画
- 一款纯css3实现的tab选项卡
- 纯css3实现的3D按钮
- 纯css3实现的超炫checkbox复选框和radio单选框
- css3制作旋转动画
- 【CSS3】 float浮动与position定位常见问题(个人笔记)
- (css3常用动画的实现