整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
同浏览器对网页默认的组件解析样式不一致，而且不够美观，网页样式开发需要大量时间，今天介绍一款优雅的 CSS 框架。
Pico.css 是一个简单轻量化的 CSS UI 框架，最大的特点是样式都基于 HMTL 原始的标签名和内置的属性，少用甚至是不用 class 来定义样式，写出来的代码语义清晰，可维护性强，能够帮助开发者构建自己的 UI 系统，也可以直接用于快速的小型项目中。
Pico-css 官网
截止发文日期，Pico.css 在 Github 上已经有高达 3898 个 Star。
引入 Pico.css 最简单直接的方式就是下载后直接引入一个样式文件：
Pico-css cdn 引入
当然也可以通过 npm 安装：
Pico-css npm 安装
然后就可以编写 html 代码了。
想要做一个输入框和提交表单，往往需要这样的代码：
常规实现 form 表单代码
而使用 Pico.css，只需要：
Pico-css 实现表单
Pico.css 内置了很多基础的组件，包括常用表单控件、表格、弹窗、导航菜单、卡片等，代码非常简洁，比如实现一个美观的进度条，只需要这点代码：
Pico-css 实现进度条
Pico.css 内置了浅色和深色两套主题，使用方法非常简单，给父级元素添加属性data-theme。
切换主题
官网还有很多代码例子，比如编写一个美观大气的登录界面，html 代码十分简洁，仿佛回到了刚刚开始学习 html 语法的时代。
登录界面
通过 CSS 文件的源码，可以看到样式的选择器大多通过 HTML 元素标签名、内置的属性以及自定义属性来命中，这样就规避了常规的只使用 class 来区分的“命名地狱”，是一种非常好的网页编程思路。
Pico-css 源码
面向对纯粹 HTML 有极致追求的开发者，Pico.css 还提供了 classless 版本，这个版本将一个 class 都没有，完全使用元素标签名和属性编写网页。
在项目中使用 Pico.css 源自于一次快速的营销页需求，需要做简单的几个带有输入交互的页面，使用 bootstrap 这样庞大的框架显然有点笨重了，如果使用当前流行的能够按需引入的 Vue UI 组件库，又免不了要用 Vue.js 来工程化。只是做几个简单的页面，没有必要用中大型项目的标配，考虑到目前市面上大多数 UI 框架都过度封装，堆叠了很多包含各种语义的 class 名，不仅会让页面加载变慢，而且会导致更长的样式计算时间，最终还是找到了适合这样场景的 Pico.css。
css 样式的写法很自由，目前前端开发存在一个趋势，为了做精美的界面，需要花费大量的时间来写样式，为了样式可以复用，绞尽脑汁给 class 起名字，甚至网上还有各种 class 命名规范，这可能导致了大量的样式被覆盖，很多时候 class 属性的名称，甚至比样式的代码还要多，极难维护。
Pico.css 的出现给这样的开发现状提供了一种新思路，不仅可以直接用在实际项目中，也能够作为构建自己的 UI 库的基础样式。
Pico.css 是一个免费开源的项目，源码基于 MIT 开源协议托管在 Github 上，任何个人和公司都可以免费下载使用。
关注我，持续分享高质量的免费开源、免费商用的资源。
↓↓点击查看本次分享的网址。
Pico.css - 简单优雅的纯 CSS 开源 UI 框架，用原始的 HTML 元素标签来做界面｜那些免费的砖
明：主要是看一下HTML，CSS和JS的有机结合。
效果说明：当单击安装时，进度条会自动显示，当到了结尾处，自动停止。
效果图：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条演示</title>
</head>
<body>
<h1 align="center">进度条演示</h1>
<div id="processbar">
<div id="percentage"></div>
</div>
<p align="center"><button id="install" type="button" onclick="proc()">安装</button></p>
</body>
</html>CSS代码：
<style type="text/css">
#processbar {
width: 100%;/*进度条的初始化宽度*/
background-color: aliceblue;/*进度条的初始化背景*/
}
#percentage {
width: 0%;/*当前进度条默认宽度为0*/
height: 30px;/*当前进度条高度*/
background-color: aquamarine;/*当前进度条颜色*/
}
#install {/*安装按钮的文字大小*/
font-size: 20px;
font-weight: bold;
}
</style>JavaScript代码：
果图
在渲染页面的过程中，进度条是我们最为常见的，有条形进度条，圆环进度条，圆形进度条。今天，我们就来实现一下圆形进度条。
用到的知识点：
首先，我们创建一个box，作为父级容器，定宽定高（160px），定位（position：relative）;
.box{
width: 160px;
height: 160px;
margin: 200px auto;
position: relative;
}
圆形进度条，分为左右两部分，利用时间差，通过动画关键帧来达到进度效果。
接下来，我们首先实现左侧部分，创建一个div，类名为left-box，定宽定高（80px，160px）；定位（position：absolute）；
在left-box下创建一个div为子元素，类名为left-tran 和 left。接下来，设置left-tran样式。
我们要明白，进度条的实现是通过时间差，改变边框的颜色。通俗一点：就是一个div，width和height都为0px；边框宽度设为100%；然后top和left为一组，bottom和right为一组，分别设置不同的颜色。效果如下图：
接下来。将父级设置overflow：hidden。超出部分隐藏。这样就只显示一半的边框，随后便利用transform：rotate旋转45deg，边框边圆角得到最终效果，如下图：
最后设置关键帧，不同的边框颜色就会相互转变
这样。左侧的样式就已经完成，右侧的与之相似，这里，我们就不在这里多加描述。
待完成右侧样式，两个关键帧动画相互协调，就可以完成一个圆形进度条啦。
今天的全部代码如下：
<!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>
* {
padding: 0px;
margin: 0px;
}
.box {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
box-sizing: border-box;
}
.left-box{
width: 100px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box;
overflow: hidden;
}
.left-tran{
width: 0px;
height: 0px;
border: 100px solid;
box-sizing: border-box;
transform: rotate(45deg);
border-radius: 50%;
}
.left{
border-left: 100px solid #e3e4e5;
border-bottom: 100px solid #e3e4e5;
animation: leftmove 10s linear infinite;
}
@keyframes leftmove{
0%{
transform: rotate(45deg);
}
50%{
transform: rotate(45deg);
}
100%{
transform: rotate(225deg);
}
}
.right-box{
width: 100px;
height: 200px;
position: absolute;
top: 0px;
right: 0px;
box-sizing: border-box;
overflow: hidden;
}
.right-tran{
width: 0px;
height: 0px;
border: 100px solid;
position: absolute;
top: 0px;
right: 0px;
transform: rotate(45deg);
border-radius: 50%;
}
.right{
border-right: 100px solid #e3e4e5;
border-top: 100px solid #e3e4e5;
animation: rightmove 10s linear infinite;
}
@keyframes rightmove{
0%{
transform: rotate(45deg);
}
50%{
transform: rotate(225deg);
}
100%{
transform: rotate(225deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="left-box">
<div class="left-tran left"></div>
</div>
<div class="right-box">
<div class="right-tran right"></div>
</div>
</div>
</body>
</html>
进度条，结合和时间戳，就可以很好的完成一个完美的时间进度条了。
希望今天的知识点对大家有所帮助。
*请认真填写需求信息，我们会在24小时内与您取得联系。
