web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
进度条
10种炫酷的CSS3 loading加载动画特效
分类:
进度条
日期:
2024-05-14
点击(3)
评论(0)
演 示
免费下载
简介
##### HTML结构 所有的loading效果都使用相同的HTML结构:使用section元素作为包裹元素,里面放置用于动画的div.spinner元素。各种动画效果均由div.spinner元素元素和它的:before和:after伪元素制作。 ```html
``` ##### CSS样式 特效中为spinner元素设置了一些同于样式:宽度和高度均为50像素,相对于section绝对定位。 ```html .spinner { width: 50px; height: 50px; border-radius: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } ``` 在第一种loading效果中,section的背景设置为褐色。spinner元素执行color-bubble帧动画。这个帧动画修改元素的颜色。 ```html .model-1 { background: #202020; } .model-1 .spinner { color: #f00; -webkit-animation: color-bubble 2s linear 0s infinite; animation: color-bubble 2s linear 0s infinite; } ``` 为了制作圆形光波扩展效果,这个特效中使用spinner元素的:before和:after伪元素来制作。通过spinner-bubble帧动画来修改它们的大小和透明度。 ```html .model-1 .spinner:after, .model-1 .spinner:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 100%; box-shadow: 0 0 0 3px; -webkit-animation: spinner-bubble 1.3s linear 0s infinite; animation: spinner-bubble 1.3s linear 0s infinite; margin: auto; width: 10px; height: 10px; opacity: 0; } .model-1 .spinner:before { -webkit-animation: spinner-bubble 1.3s linear 2s infinite; animation: spinner-bubble 1.3s linear 2s infinite; } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告