整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
同瀏覽器對網頁默認的組件解析樣式不一致，而且不夠美觀，網頁樣式開發需要大量時間，今天介紹一款優雅的 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小時內與您取得聯系。
