正文 

当前位置： 首页 > java > java框架

超简单css3水平动态进度条+小圆球+背景色渐变

MissSu      2022-02-09     641

关键词：

实现的的效果图如下：效果是动态加载的

代码如下：

<!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-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
//为了将效果图移到屏幕中间的盒子
.box{
width: 200px;
margin: 50px auto;
}
//包含进度条和圆圈的盒子
.line {
border-radius: 10px;
height: 10px;
margin-top: 6px;
animation: loader 3s linear;
position: relative;
}
//有背景色的进度条
.line_in {
border-radius: 10px;
height: 5px;
margin-top: 6px;
}
//进度条前面的圆圈
.circle {
position: absolute;
top: -2px;
right: 0px;
width: 10px;
height: 10px;
border-radius: 50%;
}
//背景色实现渐变
.green {
background-image: linear-gradient(
-45deg,
rgba(99, 193, 111, 1) 0%,
rgba(20, 157, 37, 1) 25%,
rgba(99, 193, 111, 1) 50%,
rgba(20, 157, 37, 1) 75%,
rgba(99, 193, 111, 1) 100%
);
}
//进度条能动态加载的动画
@keyframes loader {
0% {width: 0%;}
100% { width: 80%;}
}
</style>
</head>
<body>
<div class="box">
   <div class="line" style="width:80%">
       <div class="line_in green"></div>
       <div class="circle green"></div>
   </div>
</div>
<script src="./js/jquery/jquery.min.js"></script>
</body>
</html>
 

 

delphi渐变颜色进度条控件

...本电子书看到:delphi用第3方控件tgradprogress来实现渐变颜色进度条...可是.我在网上找了很久...总是找不到..麻烦大家帮帮忙找找看......谢谢~知道哪里可以下载,请留言...或请发到我的邮箱369686621@qq.com非常感谢...参考技术A这个自己... 查看详情

css3好看的background渐变背景色积累

1. Tippy.jsbackground:linear-gradient(91deg,#f1eefc,#9dc6ff70%,#a5bcff);（body背景色）background:linear-gradient(135deg,#56c8ff,#6f99fc)no-repeat;（button背景色） 查看详情

css3渐变进度条动效

效果预览：  下载地址：https://qrk.lanzous.com/ic91f6d       建议复制后打开 点击下载 查看详情

CSS3。 VueJS。动态过渡背景渐变

】CSS3。VueJS。动态过渡背景渐变【英文标题】：CSS3.VueJS.DynamicTransitioningBackgroundGradients【发布时间】：2020-04-1519:23:56【问题描述】：现在我根据应用程序中的一些逻辑更改渐变。<template><div:style="`background-image:$backgroundImage`"... 查看详情

css3背景线性渐变

5.背景线性渐变:background-gradient(1)linear:线性渐变，谷歌浏览器:(webkit)background:-webkit-gradient(linear,00,080%,from(#fff), to(#000));(水平渐变)background:-webkit-gradient(linear,00,80%0,from(#fff), to(#000 查看详情

长按如何使进度条变化android

...义完成以后，便可以使用。在音乐进度，网络下载时，需动态加载进度条，默认情况下，设置进度条，使用setProgress即可。但有时除了动态设置进度，仍需要动态设置进度条颜色通过MediaPlayer播放音乐并获取进度，设置进度。 查看详情

css静态进度条效果

...下自己的知识。最终的效果如下，进度条放在一个框里，水平宽自适应。现在就开始，首先写一个进度条先。.progress-bar{/*进度条的槽*/width:47%;/*设置进度条的高度*/height:5px;/*进度条外层div的背景色，进度未达到的地方的颜色*/back... 查看详情

html-css背景渐进色

一.分类　　a>线性渐变：颜色沿着一条直线过度：从左到右、从上到下等；　　b>径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合。1.线性渐变语法： background:linner-gradient(posit... 查看详情

android自定义水平进度条控件

...大值和默认进度值。与系统控件相比的优势：属性配置更简单、大小适配更方便。Gradle:Maven:<h3>Whatdoesitlooklike？</h3><h3>Howtouseit?</h3>1.xml2.java</br><h3>属性说明：</h3>玩安卓版王者荣耀的朋友，刷金币... 查看详情

css背景渐变图片问题

用一张像素比较小的渐变图片做背景，上半部分色比较深，下半部分色比较淡，当页面的内容比较多时，背景重复，只是只想重复下半部分色比较淡的，要如何来做。想不出来吖，如果是CSS3可以多张图片作背景，现在是用CSS2，... 查看详情

第22章css渐变效果

...学习要点：1.线性渐变2.径向渐变本章主要探讨HTML5中CSS3背景渐变功能，主要有两种渐变方式：线性渐变和径向（放射性）渐变。一．线性渐变CSS3提供了linear-gradient属性实现背景颜色的渐变功能。在以前，这种效果必须采用图片... 查看详情

怎样用div实现带百分百环形进度条

html5+javascript实现的圆形进度条，应该符合你要求源代码：http://blog.csdn.net/tangdou5682/article/details/52778766参考技术A1、html5直接就可用css3的属性去做圆形，border-radius即可实现圆角。2、图片形式，左右两侧做圆角图片，衔接好，即可... 查看详情

css3动态背景

动态背景利用多层背景的交替淡入淡出，实现一种背景在不停变换的效果，先看图。效果图：DEMO地址步骤1.利用css的radial-gradient创建一个镜像渐变的背景。当中的80%20%为渐变中心的x,y位置。详细的radial-gradient使用方法能够參见这... 查看详情

css3linear-gradient线性渐变实现虚线等简单实用图形

一、作为图片存在的CSS3gradient渐变我觉得CSS3Backgrounds比较厉害的一个地方就是支持多背景，也就是背景图片个数可以无限累加，正好CSS3的gradient渐变性质是background-image，于是，我们可以实现任意数量渐变背景图的叠加效果。甚... 查看详情

微信小程序进度条详解progress自定圆形进度条(代码片段)

...好今天就好。在微信小程序开发中，progress用来实现水平进度条效果1基本使用<progresspercent="80"stroke-width="12"show-infocolor="pink"active/>效果就是如上图所示percent表示当前的进度stroke-width进度条的宽... 查看详情

css3新特性总结之边框与背景

一、条纹背景利用background为linear-gradient函数实现，linear-gradient取值如下：<angle>：角度，渐变的方向toleftrighttopbottomcolor：指定颜色color-stop：指定渐变的起止颜色length：用长度值指定起止色的位置，不可为负值percentage：用百... 查看详情

web实现太极图背景色线性渐变旋转动画htmlcssafterbeforelineargradienttransformrotateanimation(代码片段)

...e_linear_gradient_before_afterwidth:360px;height:360px;border-radius:50%;/*圆球上半部分为白色，下半部分为黑色*/background:linear-gradient(tobottom,#ffffff0%,#ffffff50%,#00000050%,#000000100%);position:relative;transform:rotate(-90deg);animation:cartoon 查看详情

01超精美渐变色动态背景完整示例css动效实战（纯css与js动效）(代码片段)

本节案例如下（其他动效篇幅原因逐步讲解，欢迎三连）：一、线性渐变1.1渐变分类在CSS中，使用渐变色需要用到gradient属性，而gradient属性分为线性渐变linear-gradient与径向渐变radial-gradient。线性渐变和径... 查看详情