java位移的方块与进度条_CSS3 小方格依次放大的Loading进度条效果

最新推荐文章于 2024-07-19 15:32:49 发布
最新推荐文章于 2024-07-19 15:32:49 发布
阅读量129 收藏
点赞数
文章标签： java位移的方块与进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_28929201/article/details/114812490
版权
CSS3 loading加载动画-www.codesc.net

*{margin: 0;padding: 0;}

#loading {

position: absolute;

left: 600px;

top: 147px;

color: #666;

}

#loading span{

display: block;

position: absolute;

top: 32px;

height: 10px;

width: 10px;

border: 1px solid #999;

background-color: #CCC;

-webkit-animation-iteration-count: infinite;

-webkit-animation-duration: 2.5s;

}

#loading span:nth-of-type(1){

left: 0;

-webkit-animation-name: animationloading1;

}

#loading span:nth-of-type(2){

left: 20px;

-webkit-animation-name: animationloading2;

}

#loading span:nth-of-type(3){

left: 40px;

-webkit-animation-name: animationloading3;

}

#loading span:nth-of-type(4){

left: 60px;

-webkit-animation-name: animationloading4;

}

#loading span:nth-of-type(5){

left: 80px;

-webkit-animation-name: animationloading5;

}

@-webkit-keyframes animationloading1{

0%{

-webkit-transform: scale(1);

background-color: #CCC;

}

20%{

-webkit-transform: scale(1.5);

background-color: #999;

}

21%{

-webkit-transform: scale(1);

background-color: #CCC;

}

100%{

-webkit-transform: scale(1);

background-color: #CCC;

}

}

@-webkit-keyframes animationloading2{

0%{

-webkit-transform: scale(1);

background-color: #CCC;

}

20%{

-webkit-transform: scale(1);

background-color: #CCC;

}

40%{

-webkit-transform: scale(1.5);

background-color: #999;

}

41%{

-webkit-transform: scale(1);

background-color: #CCC;

}

100%{

-webkit-transform: scale(1);

background-color: #CCC;

}

}

@-webkit-keyframes animationloading3{

0%{

-webkit-transform: scale(1);

background-color: #CCC;

}

40%{

-webkit-transform: scale(1);

background-color: #CCC;

}

60%{

-webkit-transform: scale(1.5);

background-color: #999;

}

61%{

-webkit-transform: scale(1);

background-color: #CCC;

}

100%{

-webkit-transform: scale(1);

background-color: #CCC;

}

}

@-webkit-keyframes animationloading4{

0%{

-webkit-transform: scale(1);

background-color: #CCC;

}

60%{

-webkit-transform: scale(1);

background-color: #CCC;

}

80%{

-webkit-transform: scale(1.5);

background-color: #999;

}

81%{

-webkit-transform: scale(1);

background-color: #CCC;

}

100%{

-webkit-transform: scale(1);

background-color: #CCC;

}

}

@-webkit-keyframes animationloading5{

0%{

-webkit-transform: scale(1);

background-color: #CCC;

}

80%{

-webkit-transform: scale(1);

background-color: #CCC;

}

100%{

-webkit-transform: scale(1.5);

background-color: #999;

}

}

Loading 网页进度加载中……
骑马与砍杀中文站
关注
CSS步骤条，进度条
04-27
CSS步骤条，进度条，纯css，挺舒服的，可惜不能传图片
纯css实现进度条效果
weixin_30599769的博客
03-11 705
　　去年7月份做一个公司商城的微信页面（微信用的chrome内核）需要写一个提示返现进度的进度条效果。 　　一个完整的进度条效果其实可以拆分一下： 　　　　一段背景； 　　　　一小段的静态的斜纹进度条； 　　　　斜纹进度条用线性渐变linear-gradient 类实现，原理很好理解，2个参数： 　　　　　　1、角度； 　　　　　　2、关键点（包含2个参数，1是颜色，2是长度位置） ...
通过HTML/CSS 实现各类进度条的功能。
最新发布
qq_44552416的博客
07-19 4112
需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用。通过本文学习我们会明白如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式。
css实现小方块进度条
baibai_b的博客
01-04 942
【代码】css实现小方块进度条。
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2119
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
CSS 制作进度条
banchi6453的博客
08-30 249
今天和大家分享一组代码，使用css制作进度条。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <style> @keyframes test ...
CSS3斑马线进度条动画特效
12-13
**CSS3斑马线进度条动画特效详解** 在网页设计中，进度条是一个常见的元素，用于展示任务或数据加载的进度。随着CSS3技术的发展，我们可以利用其强大的样式和动画功能，创造出各种独特的视觉效果。本篇将详细介绍...
css3炫酷进度条动画
12-13
在原生Bootstrap进度条的基础上，开发者通过添加和调整CSS3代码，可以实现更多样化、动态且视觉吸引人的进度条效果。Bootstrap是一个流行的前端开发框架，它的进度条组件简洁实用，但在默认状态下样式较为单一。而...
CSS3实现的动态进度条带有当前进度百分比数字显示对比flash毫不逊色.zip
11-02
本压缩包中的内容正是关于如何利用CSS3创建一个动态进度条，并在其中显示当前的进度百分比，无需依赖Flash，效果同样出色。 CSS3（Cascading Style Sheets Level 3）是CSS的最新版本，提供了许多新的特性和功能，...
CSS3动感炫酷动画进度条插件.rar
10-01
【标题】"CSS3动感炫酷动画...综上所述，"CSS3动感炫酷动画进度条插件.rar"是一个结合了jQuery与CSS3动画技术的高效网页组件，为网页开发带来了生动、互动的进度展示方式，并且具有高度的可定制性，适合各种项目需求。
CSS实现进度条---CSS3新特性之过渡
H.千面的博客
12-16 1275
一、基础知识 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画： 是从一个状态 渐渐的过渡到另外一个状态，可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。 我们现在经常和 :hover 一起 搭配使用。 样例：鼠标放上去变化 div { width: 200px;
CSS 进度条样式组件
Jana Jing的分享
03-22 1058
<template> <div> <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}"> <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key...
css进度条
weixin_42069147的博客
06-19 166
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
小方块样式的进度条
QrunningGo的博客
03-31 817
小方块样式的进度条 <div class="progressBox"> <div v-for="(item2,index) in item.totalArr" :key="index" :class="item.totalArr[index]==1 ? 'progress':'progress2'"
css实现可控进度条动效
叶小树咯
03-03 2208
css实现可控进度条
css+div实现进度条效果
weixin_42573146的博客
01-10 1145
&lt;div class="progress"&gt;               &lt;div class="jindu"&gt;                     兑换进度                 &lt;/div&gt;                 &lt;div class="bar"&gt;&lt;/div&gt;           
CSS - 不规则图形进度条
半吊子伯爵的博客
12-08 580
CSS - 不规则图形进度条的实现方法
css实现给div添加进度条
weixin_52443895的博客
01-14 573
【代码】css实现给div添加进度条。
翻滚方块JAVA_css3实现的方块循环翻滚跳动效果
weixin_39775127的博客
03-02 182
[HTML] 纯文本查看 复制代码蚂蚁部落#colorLoading {margin:100px;}/*彩色方块loading*/@keyframes color {0% {transform: scale(.7) rotate(0deg);top: 0px;opacity: .5;}50% {transform: scale(.5) rotate(180deg);top: -20px;opaci...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值