web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
进度条
3种炫酷纯CSS3预加载动画特效
分类:
进度条
日期:
2024-05-14
点击(4)
评论(0)
演 示
免费下载
简介
这组特效使用bootstrap网格系统来进行布局,使用时在页面中引入bootstrap文件。 ```html
``` ##### HTML结构 以第一种翻书预加载动画效果为例,它的HMTL结构如下: ```html
``` ##### CSS样式 为loader添加下面的CSS样式,翻书动画通过CSS3 animation动画来实现。 ```html .loader{ width: 56px; height: 50px; margin: 50px auto; position: relative; perspective: 100px; perspective-origin: 50% 100%; transform-style: preserve-3d; transform: translateZ(-1px); } .loader .loader-inner{ width: 50%; height: 100%; background: #fff; border: 3px solid #fc440f; position: absolute; right: 0; transform-origin: 0% 100%; } .loader .loader-inner:first-child{ left: 0; } .loader .loader-inner hr{ margin: 3px 3px 6px; border: 1px solid rgba(252,68,15, 0.9); } .loader .loader-inner.box{ -webkit-animation: loading-1 3.6s infinite ease-in-out; animation: loading-1 3.6s infinite ease-in-out; } .loader .loader-inner.box-1{ animation-delay: .2s; } .loader .loader-inner.box-2{ animation-delay: .4s; } .loader .loader-inner.box-3{ animation-delay: 0.6s; } .loader .loader-inner.box-4{ animation-delay: 0.8s; } .loader .loader-inner.box-5{ animation-delay: 1.8s; } .loader .loader-inner.box-6{ animation-delay: 2.2s; } @-webkit-keyframes loading-1{ 25%,100%{ transform: translateX(3px) rotateY(-180deg); } } @keyframes loading-1{ 25%,100%{ transform: translateX(3px) rotateY(-180deg); } } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告