效果展示：

网页源码：

HTML模块：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>技能进度条</title><link rel="stylesheet" href="css/ProgressBar.css">
</head>
<body>
<div><ul><li class="js">JavaScript</li><li class="react">React</li><li class="html5">HTML5</li><li class="css3">CSS3</li><li class="sketch">Sketch</li></ul>
</div>
</body>
</html>

CSS模块：

html, body {margin: 0;padding: 0;font-family: sans-serif;
}* {box-sizing: border-box;
}div {display: flex;align-items: center;justify-content: center;height: 100vh;background-color: #1e272e;
}ul {width: 500px;
}li {list-style: none;color: #d2dae2;font-size: 18px;margin: 48px 0;position: relative;
}li:before, li:after {content: "";display: block;height: 16px;width: 100%;background-color: #1f4a59;position: absolute;bottom: -28px;border-radius: 6px;
}li:before {box-shadow: 0 0 6px rgba(75, 207, 250, 0.2);
}li:after {background-image: linear-gradient(90deg, #0fbcf9, #34e7e4);
}li:after {animation: 1.2s forwards ease-in-out;
}.js:after {animation-name: js;
}.react:after {animation-name: react;
}.html5:after {animation-name: html5;
}.css3:after {animation-name: css3;
}.sketch:after {animation-name: sketch;
}@keyframes js {from{width: 0;}to{width: 90%;}
}
@keyframes react {from{width: 0;}to{width: 80%;}
}
@keyframes html5 {from{width: 0;}to{width: 70%;}
}
@keyframes css3 {from{width: 0;}to{width: 60%;}
}
@keyframes sketch {from{width: 0;}to{width: 50%;}
}

参考：b站up主 叫我凤凰Blanco

HTML+CSS小实例（进度条）相关推荐

圆的css样式,圆形进度条css3样式
30% 以下样式100upx是50upx的2倍,这是尺寸比例 .con { position: relative; display: inline-block; height: 100upx; wid ...
css实现圆形进度条
css实现圆形进度条先来看一下效果图: 具体实现步骤: 先画一个大圆,底色为#ffffff; <div class="third"> </div> .th ...
CSS实现步骤进度条——前端每日一练
CSS实现步骤进度条效果展示 HTML布局文件 CSS样式 JavaScript操作逻辑补充:JavaScript的this关键字效果展示 HTML布局文件总体布局,一个大div盒子包裹所有内 ...
Canvas 使用小心得（环形带小点进度条）
先来个预览直接贴代码吧.. HTML 关于canvas的宽高问题,参见链接 <!DOCTYPE html> <html> <head><meta http- ...
CSS实现圆环进度条
CSS实现圆环进度条一.静态进度条首先,我们先看一个静态进度条第一步当然是先实现一个最外层的父级圆环. 其次是通过 clip-path画出两个半圆,并绝对定位覆盖在父级圆环. 小于50的时候,我 ...
微信小程序进度条详解 progress 自定圆形进度条
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,progress用来实现水平进度条效果 1 基本使用 <progress percent="80& ...
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
微信小程序自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: 页面初始化 options为页面跳转所带来的参数 ...
微信小程序进度条样式_微信小程序——自定义圆形进度条
无图无真相中比需抖接朋功要朋插,先上图: 实现体朋几一级发等点确层数框的很屏果行4带域思路,先绘制底层的灰色圆圈背景,再绘制上层的直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如数围请蓝色进度条 ...
微信小程序进度条组件自定义数字_微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组遇新是直朋能到件第一步创建项遇新是直朋能到分览目结构 ...

HTML+CSS小实例（进度条）

效果展示：

网页源码：

HTML模块：

CSS模块：

HTML+CSS小实例（进度条）相关推荐

最新文章

热门文章