讓用戶輸密碼的正確姿勢！簡化密碼設計的三個小秘籍
2023-06-28 15:50北京北京蘭亭妙微科技有限公司官方帳號
隨著互聯網的普及和數字化時代的來臨，密碼的重要性不言而喻。然而，很多人在設計密碼時往往面臨記憶難題和安全性問題。為了幫助用戶設計更簡化且安全的密碼，本文將介紹三個小秘籍。
一、使用密碼管理工具
密碼管理工具是一種方便且安全的方式來管理和存儲密碼。它們通常提供加密的存儲空間，可以儲存各種賬戶的用戶名和密碼。用戶只需記住一個主密碼，就能夠訪問和管理所有其他密碼。這樣，用戶可以選擇更復雜、更安全的密碼，而不必擔心記憶的問題。此外，密碼管理工具通常還提供自動生成密碼的功能，確保密碼的隨機性和安全性。一些常見的密碼管理工具包括LastPass、1Password和Keepass等。
二、使用短語或句子作為密碼
傳統的密碼通常由字符、數字和特殊符號組成，很難記憶且容易被猜測。相比之下，使用短語或句子作為密碼可以更容易記住且更安全。選擇一個有意義的短語或句子，并將其轉化為密碼。例如，"ILoveToTravelTheWorld!"，這個短語可以轉化為密碼"Ilv2ttw!"。這樣的密碼不僅容易記憶，而且由于包含了大小寫字母、數字和特殊符號，具備了一定的安全性。
三、使用多因素身份驗證
多因素身份驗證是一種提高賬戶安全性的重要方式。除了使用密碼外，多因素身份驗證要求用戶提供第二個驗證因素，如手機驗證碼、指紋識別或硬件安全密鑰等。這樣，即使密碼被泄露，黑客也無法輕易訪問賬戶。許多在線服務提供了多因素身份驗證選項，用戶應該積極開啟并使用這個功能。
綜上所述，設計簡化且安全的密碼并不是一件困難的事情。通過使用密碼管理工具、使用短語或句子作為密碼以及使用多因素身份驗證，用戶可以更好地保護自己的賬戶安全。重要的是，用戶應該時刻保持警惕，定期更換密碼，并避免在多個賬戶中使用相同的密碼，以確保個人信息的安全。
今日分享這篇文章是藍藍設計的原創文章，未來將會持續在平臺上分享關于設計行業的文章。此外藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，添加vx藍小助ben_lanlan，報下信息，藍小助會請您入群。同時添加藍小助我們將會為您提供優秀的設計案例和設計素材等，歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
以下是在 JavaScript 和 Google 地圖 API 中添加點擊事件，根據國家進行不同操作的示例代碼：
//創建地圖對象
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 37.0902, lng: -95.7129}
});
//創建信息窗口（infowindow）
var infowindow = new google.maps.InfoWindow();
//創建一個數組來存儲標記
var markers = [];
//為每個國家添加點擊事件
google.maps.event.addListener(map, 'click', function(event) {
//獲取點擊位置的經緯度坐標
var latLng = event.latLng;
//使用地理編碼器（geocoder）將經緯度坐標轉換為地址信息
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'location': latLng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
//獲取點擊位置所在的國家名稱
var countryName = '';
for (var i = 0; i < results[0].address_components.length; i++) {
var component = results[0].address_components[i];
if (component.types.indexOf('country') !== -1) {
countryName = component.long_name;
break;
}
}
//根據國家名稱執行相應操作
switch (countryName) {
case 'China':
alert('您點擊了中國');
break;
case 'United States':
alert('您點擊了美國');
break;
default:
alert('您點擊了' + countryName);
}
//創建標記并將其添加到地圖上
var marker = new google.maps.Marker({
position: latLng,
map: map
});
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
要用 Cesium.js 制作一個球形地圖，可以按照以下步驟：
在 HTML 文件中添加 Cesium.js 庫文件的引用?？梢酝ㄟ^以下方式獲取最新版的 Cesium.js 庫文件鏈接：https://cesium.com/downloads/。
創建一個 div 元素來容納地球場景，并設置其樣式以占滿整個屏幕。
在 JavaScript 文件中創建 Cesium.Viewer 對象并將其附加到之前創建的 div 元素上。這將在屏幕上顯示一個球體，并啟動 Cesium.js 場景。
可以通過更改 Viewer 對象的屬性來自定義地球的外觀和行為。例如，可以更改攝像機的位置和方向、加載不同類型的地圖數據、添加標記等等。
以下是一個簡單的示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Cesium App</title>
<style>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
這將創建一個簡單的地球場景，可以在其中添加更
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
目錄
動畫（animation）是CSS3中具有顛覆性的特征之一，可通過設置多個節點來精確控制一個或一組動畫，常 用來實現復雜的動畫效果。
相比較過渡，動畫可以實現更多變化，更多控制，連續自動播放等效果。
制作動畫分為兩步： 1.先定義動畫 2.再使用（調用）動畫
1. 用keyframes 定義動畫（類似定義類選擇器）
@keyframes 動畫名稱 {
0%{
width:100px;
}
100%{
width:200px;
}
}
動畫序列
0% 是動畫的開始，100% 是動畫的完成。這樣的規則就是動畫序列。
在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意的次數。
請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同于 0% 和 100%。
2. 元素使用動畫
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto; /* 調用動畫 */
animation-name: 動畫名稱;
/* 持續時間 */ animation-duration: 持續時間; }
-
<!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>
-
/* 我們想頁面一打開，一個盒子就從左邊走到右邊 */
-
/* 1. 定義動畫 */
-
-
@keyframes move {
-
/* 開始狀態 */
-
0% {
-
transform: translateX(0px);
-
}
-
/* 結束狀態 */
-
100% {
-
transform: translateX(1000px);
-
}
-
}
-
-
div {
-
width: 200px;
-
height: 200px;
-
background-color: pink;
-
/* 2. 調用動畫 */
-
/* 動畫名稱 */
-
animation-name: move;
-
/* 持續時間 */
-
animation-duration: 2s;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div></div>
-
</body>
-
-
</html>
-
<!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>
-
/* from to 等價于 0% 和 100% */
-
/* @keyframes move {
-
from {
-
transform: translate(0, 0);
-
}
-
to {
-
transform: translate(1000px, 0);
-
}
-
} */
-
/* 動畫序列 */
-
/* 1. 可以做多個狀態的變化 keyframe 關鍵幀 */
-
/* 2. 里面的百分比要是整數 */
-
/* 3. 里面的百分比就是 總的時間（我們這個案例10s）的劃分 25% * 10 = 2.5s */
-
-
@keyframes move {
-
0% {
-
transform: translate(0, 0);
-
}
-
25% {
-
transform: translate(1000px, 0)
-
}
-
50% {
-
transform: translate(1000px, 500px);
-
}
-
75% {
-
transform: translate(0, 500px);
-
}
-
100% {
-
transform: translate(0, 0);
-
}
-
}
-
-
div {
-
width: 100px;
-
height: 100px;
-
background-color: pink;
-
animation-name: move;
-
animation-duration: 10s;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div>
-
-
</div>
-
</body>
-
-
</html>
-
<!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>
-
@keyframes move {
-
0% {
-
transform: translate(0, 0);
-
}
-
100% {
-
transform: translate(1000px, 0);
-
}
-
}
-
-
div {
-
width: 100px;
-
height: 100px;
-
background-color: pink;
-
/* 動畫名稱 */
-
animation-name: move;
-
/* 持續時間 */
-
/* animation-duration: 2s; */
-
/* 運動曲線 */
-
/* animation-timing-function: ease; */
-
/* 何時開始 */
-
animation-delay: 1s;
-
/* 重復次數 iteration 重復的 conut 次數 infinite 無限 */
-
/* animation-iteration-count: infinite; */
-
/* 是否反方向播放 默認的是 normal 如果想要反方向 就寫 alternate */
-
/* animation-direction: alternate; */
-
/* 動畫結束后的狀態 默認的是 backwards 回到起始狀態 我們可以讓他停留在結束狀態 forwards */
-
/* animation-fill-mode: forwards; */
-
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
-
/* animation: move 2s linear 0s 1 alternate forwards; */
-
/* 前面2個屬性 name duration 一定要寫 */
-
/* animation: move 2s linear alternate forwards; */
-
}
-
-
div:hover {
-
/* 鼠標經過div 讓這個div 停止動畫，鼠標離開就繼續動畫 */
-
animation-play-state: paused;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div>
-
-
</div>
-
</body>
-
-
</html>
linear 勻速
animation：動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或者結束的狀態
animation: myfirst 5s linear 2s infinite alternate;
簡寫屬性里面不包含 animation-play-state
暫停動畫：animation-play-state: puased; 經常和鼠標經過等其他配合使用
想要動畫走回來 ，而不是直接跳回來：animation-direction ： alternate
盒子動畫結束后，停在結束位置： animation-fill-mode ： forwards
還沒聽。。
animation-timing-function：規定動畫的速度曲線，默認是“ease“
-
<!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>
-
div {
-
overflow: hidden;
-
font-size: 20px;
-
width: 0;
-
height: 30px;
-
background-color: pink;
-
/* 讓我們的文字強制一行內顯示 */
-
white-space: nowrap;
-
/* steps 就是分幾步來完成我們的動畫 有了steps 就不要在寫 ease 或者linear 了 */
-
animation: w 4s steps(10) forwards;
-
}
-
-
@keyframes w {
-
0% {
-
width: 0;
-
}
-
100% {
-
width: 200px;
-
}
-
}
-
</style>
-
</head>
-
-
<body>
-
<div>世紀佳緣我在這里等你</div>
-
</body>
-
-
</html>
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
一、CSS3 2D變形（利用Transfrom方法）
1、rotate（angle）
元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
transform: rotate(30deg) ;
margin: 200px auto;
}
</style>
<body>
<div>
</div>
</body>
</html>
效果如圖
如果當rotate里面的值為負數時，比如ratate（-10deg），效果如圖：
2、 translate(x,y)方法
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 坐標） 和 top（y 坐標） 位置參數。也就是相對于頁面左部和頂部的距離
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div { width: 100px; height: 100px; border: 1px solid red; transform: translate(20px, 20px); } </style> <body> <div></div> </body> </html>
效果如下
初次之外還有其他的參數
transform: translate(200px);
如果只帶一個參數，這個參數代表的是x方向位移值，y方向位移為0
transform: translateX(200px);
對X方向移動
transform: translateY(200px);
對Y方向移動
3、scale() 方法
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div { width: 100px; height: 100px; border: 1px solid red; transform: scale(2,0.5); margin: 20px auto; } </style> <body> <div></div> </body> </html>
效果如圖
可以看到，長邊變為了原來的兩倍，寬邊變為了原來的0.5倍
transform: scale(1.5)；x軸和y軸都放大1.5倍
transform: scaleX(1.5)；x軸放大1.5倍
transform: scaleY(1.5)；y軸放大1.5倍
transform-origin: left top;改變中心點位置為左上角，當然還可以自由搭配，右下（right bottom），右上（right top）
4、 skew() 方法
通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div { width: 100px; height: 100px; border: 1px solid red; transform: skew(30deg,30deg); margin: 200px auto; } </style> <body> <div></div> </body> </html>
效果如圖
意思就是：圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 30 度?？赡芸雌饋肀容^抽象
transform: skew(230deg);如果只帶一個參數，只有x軸方向的扭曲
transform: skewX(230deg); 對X軸進行翻轉
transform: skewY(230deg); 對Y軸進行翻轉
其實還是很好理解的，比如兩個圖疊加在一起
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .demo{ width: 200px; height: 200px; margin: 200px auto; border: 1px solid #000; } .box{ width: 200px; height: 200px; border: 1px solid red; transform: skew(5deg,0deg); } </style> <body> <div class="demo"> <div class="box"></div> </div> </body> </html>
可以看到，所謂的X軸翻轉，其實就是x方向的移動，上面的線向左移動5px，下面的線向右移動5px，加入Y也一樣
比如：transform: skew(0deg,5deg);
左邊的線向上移動5px，右邊的線向下移動5px，同時改變時 transform: skew(5deg,5deg);
最好記的方式就是對角線的同時移動，左上右下是排斥，左下右上是吸引
5、matrix() 方法
matrix() 方法把所有 2D 轉換方法組合在一起。
matrix() 方法需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。
如題：將div右移100px,下移200px，旋轉30度，x軸縮放1.5倍，y軸縮放2倍。
（1）transform: translate(100px, 200px) rotate(30deg) scale(1.5, 2);
（2）transform: matrix(1.299, 0.75, -1, 1.732, 100, 200)
計算方法
效果如圖
6、transform-origin 屬性
允許你改變被轉換元素的位置
語法： transform-origin: x-axis y-axis z-axis;
屬性值：
x-axis ：定義視圖被置于 X 軸的何處。可能的值：left，center，right，length，%。
y-axis ：定義視圖被置于 Y 軸的何處?？赡艿闹担簍op，center，bottom，length，%。
z-axis ：定義視圖被置于 Z 軸的何處。可能的值：length。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform-origin</title> <style> *{ margin: 0; padding: 0; } .demo{ width: 200px; height: 200px; margin: 200px auto; border: 1px solid #000; } .box{ width: 200px; height: 200px; background-color: #f00; transform: rotate(60deg); transform-origin: right bottom; } </style> </head> <body> <div class="demo"> <div class="box"></div> </div> </body> </html>
效果如圖
形象的來說，就是規定你從哪個角開始旋轉，比如規定右下角旋轉，則圖形以右下角為旋轉角，順時針旋轉60°
二、CSS3 3D變形
1、perspective屬性
perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
注釋：perspective 屬性只影響 3D 轉換元素。
語法： perspective: number|none;
屬性值：
number ：元素距離視圖的距離，以像素計。
none ：默認值。與 0 相同。不設置透視
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>perspective</title> <style> .father{ position: relative; width: 200px; height: 200px; padding: 10px; margin: 200px auto; border: 1px solid #999; perspective: 150px; } .son{ width: 100px; height: 50px; padding: 50px; position: absolute; border: 1px solid #f00; background-color: #0ff; transform: rotateX(45deg); } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
效果如圖
2、trasform-style屬性
transform-style 屬性規定如何在 3D 空間中呈現被嵌套的元素。
注釋：該屬性必須與 transform 屬性一同使用。
語法： transform-style: flat|preserve-3d;
屬性值：
flat ：子元素將不保留其 3D 位置。
preserve-3d ：子元素將保留其 3D 位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform-style</title> <style> .wrapper{ width: 200px; height: 100px; margin: 200px auto; } .div1,.div2{ width: 200px; height: 100px; padding: 20px; } .div1{ background-color: #f00; transform: rotateY(30deg); transform-style: preserve-3d; } .div2{ background-color: #655fff; transform: rotateY(45deg); } </style> </head> <body> <div class="wrapper"> <div class="div1">div1 <div class="div2">div2</div> </div> </div> </body> </html>
效果如圖
3、CSS3過渡
transition 屬性是一個簡寫屬性，用于設置四個過渡屬性：
transition-property：規定設置過渡效果的 CSS 屬性的名稱。
transition-duration：規定完成過渡效果需要多少秒或毫秒。
transition-timing-function：規定速度效果的速度曲線。
transition-delay：定義過渡效果何時開始。
注釋：請始終設置 transition-duration 屬性，否則時長為 0，就不會產生過渡效果。
語法： transition: property duration timing-function delay;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition過渡動畫</title> <style> .box{ width: 100%; height: 300px; position: relative; border: 1px solid #eee; } .demo{ width: 100px; height: 100px; background-color: #f00; position: absolute; left: 100px; top: 100px; transform: rotate(0deg); transition-property: all; transition-duration: .8s; } .box:hover .demo{ left: 500px; width: 300px; transform: rotate(45deg); } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
或者
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition過渡動畫</title> <style> .box{ width: 100%; height: 300px; position: relative; border: 1px solid #eee; } .demo{ width: 100px; height: 100px; background-color: #f00; position: absolute; left: 100px; top: 100px; transform: rotate(0deg); transition: left 2s ease 500ms, width 5s ease-in-out; } .box:hover .demo{ left: 500px; width: 300px; transform: rotate(45deg); } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
可以自行實驗一下
4、CSS3動畫
使用@keyframes
通過 @keyframes 規則，您能夠創建動畫。
創建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規定改變發生的時間，或者通過關鍵詞 “from” 和 “to”，等價于 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結束時間。
為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>關鍵幀動畫</title> <style> .box{ width: 100%; height: 800px; position: relative; } .demo{ width: 100px; height: 100px; background-color: #ff0000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; /*animation: move 5s ease-in-out infinite alternate ;*/ -webkit-animation: move 5s ease-in-out 500ms 2 alternate ; -moz-animation: move 5s ease-in-out 500ms 2 alternate ; -ms-animation: move 5s ease-in-out 500ms 2 alternate ; -o-animation: move 5s ease-in-out 500ms 2 alternate ; animation: move 5s ease-in-out 500ms 2 alternate ; } @keyframes move { 0%{ left: 100px; } 45%{ left: 200px; top: 100px; background-color: #00f; } 75%{ left: 400px; top: 300px; background-color: #64ff77; } 100%{ left: 500px; top: 500px; background-color: #ff4975; } } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
或者
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>關鍵幀動畫</title> <style> .box{ width: 100%; height: 800px; position: relative; } .demo{ width: 100px; height: 100px; background-color: #ff0000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; /*animation: move 5s ease-in-out infinite alternate ;*/ -webkit-animation: move 5s ease-in-out 500ms 2 alternate ; -moz-animation: move 5s ease-in-out 500ms 2 alternate ; -ms-animation: move 5s ease-in-out 500ms 2 alternate ; -o-animation: move 5s ease-in-out 500ms 2 alternate ; animation: move 5s ease-in-out 500ms 2 alternate ; } @keyframes move { from{ left: 100px; } to{ left: 500px; background-color: #00f; } } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
animation:move 5s ease-in-out 500ms 2 alternate
move：表示animation-name ，動畫名稱
5s：表示animation-duration，時長
ease-in-out：表示animation-timing-function 規定動畫的速度曲線
（
除此以外還有：
linear：動畫從頭到尾的速度是相同的。
ease：默認。動畫以低速開始，然后加快，在結束前變慢。
ease-in：動畫以低速開始。
ease-out：動畫以低速結束。
ease-in-out：動畫以低速開始和結束。
）
500ms：表示animation-delay，規定在動畫開始之前的延遲。
2 ：表示animation-iteration-count，規定動畫應該播放的次數。
alternate：表示animation-direction，規定是否應該輪流反向播放動畫，如果 animation-direction 值是 “alternate”，則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等）向后播放。。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
本篇文章通過代碼示例介紹一下使用純CSS畫圓環的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
畫圓環思想很簡單：首先畫兩個圓，設置不同的背景色；然后讓兩個圓的圓心重合即可。
難度系數
☆☆
HTML
解析：此處有父容器
CSS.container {
position: relative;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.ring-style {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: blue;
width: 260px;
height: 260px;
border-radius: 260px;
}
.ring-style::before {
content: ' ';
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 200px;
height: 200px;
border-radius: 200px;
}
解析：設置元素的寬高、圓角效果，即可畫出一個圓
通過 ::before 偽元素和本體元素，創建兩個圓
通過基于父容器的絕對定位，設置 top、left、translate 屬性，讓元素基于父容器水平、豎直居中，即可讓兩個圓的圓心重合
【推薦教程：CSS視頻教程 】
效果圖
知識點border-radius
::before && ::after
元素水平、豎直居中
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Echarts的legend屬性是對圖例組件的相關配置
而legend就是Echarts圖表中對圖形的解釋部分：
其中legend自身常用的配置屬性如下：
設置圖例的朝向
屬性值：
vertical // 垂直顯示
或者
horizontal // 水平顯示
legend: { orient: 'vertical' }
legend: { orient: 'horizontal' }
設置圖例在X軸方向上的位置以及在Y軸方向上的位置
| 位置 | 取值 |
|---|---|
| ｘ/left | left/center/right |
| y /top | top/center/bottom |
例子：
legend: { orient: 'vertical', x:'right', y:'center' }
| 屬性 | 說明 |
|---|---|
| backgroundColor | 背景顏色 |
| borderColor | 邊框顏色 |
| borderWidth | 邊框寬度 |
| padding | 內邊距 |
注意：邊框寬度和內邊距屬性值為數值，不加單位。
legend: { orient: 'vertical', x:'center', y:'top', backgroundColor: '#fac858', borderColor: '#5470c6', borderWidth: '200', }
控制每一項的間距，也就是圖例之間的距離
屬性值為數值，不帶單位
legend: { orient: 'horizontal', x:'center', y:'top', itemGap: 40 }
控制圖例圖形的高度
屬性值為數字，不加單位
legend: { orient: 'horizontal', x:'center', y:'top', itemHeight: 5 }
設置圖例文字樣式
屬性值為一個對象
legend: { orient: 'horizontal', x:'center', y:'top', textStyle: { color: 'red', fontSize: '20px', fontWeight: 700 } }
設置圖例的某個選項的數據默認是顯示還是隱藏。
false: 隱藏
屬性值：對象，屬性值內容：圖例上的數據與boolean構成鍵值對
如果某選項設置為false，那么圖標上的數據也會默認不顯示，而圖例會以灰色樣式顯示
legend: { orient: 'horizontal', x:'center', y:'top', selected:{ '搜索引擎': false, '聯盟廣告': false } }
圖例上顯示的文字信息，如果不設置該項，默認會以series設置的信息作為圖例信息。如果設置該項，必須與series設置的信息一致，才會生效。
而該屬性的作用：可以單獨對圖例中某個選項進行單獨設置樣式
比如：
legend: { orient: 'horizontal', x:'center', y:'top', data:[{ name: '搜索引擎', icon: 'circle', textStyle: {fontWeight: 'bold', color: 'orange'} },'直接訪問','郵件營銷','聯盟廣告','視頻廣告'] }
以上單獨設置中
name:指定該項的名稱，必填
icon:指定圖例項的icon，可以為內置的圖形7個圖形，或者自定義圖標的形式：'image://url'
textStyle:：設置文本樣式
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
今天用WebStorm運行前端代碼時，發現不太好打斷點。
于是，打算改用VSCode來運行前端代碼，但前提是要安裝VSCode，如下便是超詳細的VSCode安裝教程以及解決VSCode下載速度特別慢的問題。
VSCode官網
download下載
你會發現VSCode官網地址下載很慢，或者下著下著就暫停了，如下圖所示：
如果下載完成，那得等到猴年馬月。
我是用chrome瀏覽器，點擊右下角的全部顯示按鈕，可以跳轉到下載內容頁面。
如果你是用其他瀏覽器，可能使用其他方式跳轉到下載內容頁面。
vscode.cdn.azure.cn
即https://az764295.vo.msecnd.net/stable/129500ee4c8ab7263461ffe327268ba56b9f210d/VSCodeUserSetup-x64-1.72.1.exe修改為https://vscode.cdn.azure.cn/stable/129500ee4c8ab7263461ffe327268ba56b9f210d/VSCodeUserSetup-x64-1.72.1.exe
將替換后的地址輸入到瀏覽器的地址欄中，如下圖所示，按enter鍵即可快速下載。
速度是不是立刻提升了。
因為我的系統盤(C盤)的內存不夠用了，需要更換到其他盤符，我更換到D盤中。
如果你不想更換到其他盤符，可以直接下一步即可。
VSCode
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
什么是css預處理技術
css預處理技術的種類
如此之多的 CSS 預處理器，那么“我應該選擇哪種 CSS 預處理器？”也相應成了最近網上的一大熱門話題，各大技術論壇也是爭論不休。
到目前為止，在眾多優秀的 CSS 預處理器語言中就屬 Sass、LESS 和 Stylus 最優秀。
Sass(Syntactically Awesome StyleSheets)是一種CSS預處理器(preprocessor)， 是一款強化 CSS 的輔助工具。可以高效的編寫樣式，同時實現變量、嵌套、組合、繼承等編程語言功能。
css是一門非程序式語言，沒有變量、函數、scope(作用域)等概念。
- CSS需要書寫大量看似沒有邏輯的代碼，冗余度比較高
- 不方便維護及擴展，難以復用
- css沒有很好的計算能力
- 非前端工程師往往會因為缺少CSS編寫經驗而很難寫出組織良好且易于維護的CSS代碼
CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發者只要使用這種語言進行CSS的編碼工作就可以了。
“用一種專門的編程語言，進行 Web 頁面樣式設計，再通過編譯器轉化為正常的 CSS 文件，以供項目使用。”
sass是最早出現的css預處理語言，有著比less更強大的功能。采用Ruby語言編寫。
最初版本采用的是嚴格縮進的風格（不帶大括號( {} )和分號( ; )，這一語法也導致一開始，sass并不太為開發者所接受）。
從 V3 版本開始放棄了縮進式的風格，并完全兼容普通的css代碼，也因此從第三代開始，sass也被稱為scss。
Sass 3 就是 Scss，是Sassy CSS的簡寫，它是CSS3語法的超集，也就是說所有有效的CSS/CSS3樣式也同樣適合于Sass。
對現代編程來說，sass就是scss，也因此，sass現在的擴展名為.scss（如果是舊版本的sass，可能擴展名會為.sass）。
cmd打開本地命令控制窗口，輸入下面字符串然后回車就裝好了。
npm install -g sass
編譯.scss文件為.css文件：
Sass使用.scss作為文件后綴名，不能直接在< link >標簽里使用，需要編譯為 .css文件。 演示：
建一個.scss后綴的文件，如input.scss，寫點基本樣式sass的語法：
在html文件所在的路徑下打開cmd命令控制符，輸入：
//單文件轉換命令
sass input.scss:output.css
// 或 sass input.scss output.css
表示把名字為 input.scss 轉換成名字為 ouput.css 的文件。
回車后，接下來發現就得到了css的文件。
使用 : 編譯輸出時，前后不能有空格，即
:前緊跟輸入的scss文件，:后緊跟輸出的css文件。
:冒號形式的命令，常用于編譯文件夾（中的所有sass文件）的輸入輸出。
css文件內容如下，可以看出轉換好了：
接下來就是老操作了，在HTML里用 < link >標簽把css文件引入就行。
但是不可能說寫一句.scss語句就轉換一次，太麻煩，所以可以自動轉換，當我在.scss里寫一句，.css就自動生成一句。在cmd輸入以下：
sass --watch input.scss:ouput.css
表示監視變化，當input.scss一變化，output.css就變化
空格和冒號對應生成css的兩中模式，如果是一對一模式（一個scss生成一個css），使用空格即可；如果是多對多模式，比如一個文件夾生成到另一個文件夾，同時一次性有多個scss文件生成css文件等。
# 編譯 light.scss 和 dark.scss 到 light.css 和 dark.css. > sass light.scss:light.css dark.scss:dark.css
sass --watch fileFolder:outputFolder/css
當名字為fileFolder這個文件夾里任意一個.scss后綴的文件變化時，就將其編譯到名字outputFolder/css這個文件夾里面（會自動生成相應的.css文件）
可以通過 sass -h 或 sass --help 查看詳細配置項。
配置選項可以指定編譯后的css的排版、是否生成調試map、開啟debug等，最常用的是 --style 和 --sourcemap。
--watch監聽文件變化
sass使用--watch選項，用于監聽scss文件的變化。這樣，當scss文件內容有改動時，會自動編譯為css。
sass --watch .\firstsass.scss .\firstsass1.css
sass --watch .\scssdir\ .\cssdir\
sass --watch scssdir:cssdir
可以看到，使用 : 可以指定輸出的路徑（文件夾），否則css將默認生成在源scss文件所在目錄中。
--style 監聽
sass --watch app/sass:public/stylesheets --style=compressed
使用壓縮（compressed）的樣式（style）輸出 css 文件
--style指定css的樣式
--style 的css格式有兩種：expanded（默認）、compressed。
舊版本的Ruby實現中有四種樣式，還有
nested、compact。
// 指定編譯格式
sass input.scss:output.css --style=expanded
比如，一個scss文件如下：
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
下面，可以查看expanded、compressed編譯后的css格式。
expanded ：默認值，未壓縮的展開的css格式
每個選擇器和聲明單獨一行。
執行如下命令編譯：
sass styletest.scss styletest.css --style=expanded
# 或 sass styletest.scss styletest.css
expanded編譯過后的樣式，是標準的沒有經過任何壓縮，全部字符展開的css格式：
.box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }
compressed 去除所有的空白字符，全部css內容壓縮為一行
生產環境中推薦的css格式。
執行如下命令編譯，將css結果輸出在命令行中：
sass --style=compressed styletest.scss
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
live sass compiler是VSCode擴展，可以實時地將SASS / SCSS文件編譯/轉換為CSS文件。
1.在vscode插件里搜索live sass compiler安裝。
2.安裝后，新建scss文件，在vscode底部狀態欄中點擊watch sass，此時狀態為 Watching ，即可自動解析sass為css文件。
在使用live sass compiler插件時，并不是所有的默認設置都如我們所愿，那么，我們來看一下如何自定義設置。
1.編譯/轉換后的文件格式、擴展名、保存位置
我們在配置中如下設置：
"liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" } ]
savePath即為導出后的文件保存位置。
2.去掉編譯時出現的css.map文件
在每個文件編譯后，默認設置下，會同時出現一個map格式的文件，有時并不需要該文件，那么我們如何去掉呢？
"liveSassCompile.settings.generateMap": false,
默認值為true，我們設置為false即可。
3.設置css兼容性前綴
live sass compiler可以在編譯時自動添加CSS兼容性前綴（-webkit-，-moz-，-ms，-o-等），如下設置：
"liveSassCompile.settings.autoprefix": [ "> 1%", "last 3 versions" ],
其中，
這里也可以設置為具體的瀏覽器，如下：
"liveSassCompile.settings.autoprefix": [ "ie >= 6", //ie6以上 "firefox >= 8", "chrome >= 24", "Opera>=10" ],
總結
個人配置：
"liveSassCompile.settings.generateMap": true, "liveSassCompile.settings.autoprefix": [ "ie >= 6", //ie6以上 "firefox >= 8", "chrome >= 24", "Opera>=10" ], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**" ], "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" }, "liveSassCompile.settings.showOutputWindow": true ]
壓縮生成min.css文件 "liveSassCompile.settings.formats": [ // More Complex { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" } ]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
感覺總體作用不大，還是結合webpack等工具，實時更新頁面內容時，實時編譯scss，而不需要單獨使用該工具。
在目前主流的前端項目中，一般是使用 Webpack 來構建我們的前端項目，并且大多數都跑在 Node 環境下。
行如下命令安裝 sass-loader ：
npm install mini-css-extract-plugin -D npm install css-loader -D npm install sass-loader --save-dev
webpack.config.js
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
let form = layui.form
layui.table.render({
id: 'commanderId',
elem: '#users-list',
url: '/team-cpt/competition/findUserByUnitId',
method: 'post',
request: {pageName: 'pageNum'},
where: {cptId: cptId, unitId: unitId,realName:realName,phone:phone},
parseData: convert2LayuiGrid,
page: true,
cols: [[
{field: 'id', title: 'ID', fixed: 'left', hide: true},
{type: 'radio', fixed: 'left', width: '10%', hide: false},
{field: 'realName', title: '姓名', align: 'center', fixed: 'left'},
{field: 'username', title: '手機號', align: 'center', fixed: 'left'}
]],
done: function (res, curr, count) {
for (let i = 0; i <res.data.length ; i++) {
if (res.data[i].id === commanedrId) {
$('div.layui-unselect.layui-form-radio')[i].click()//選中
//下面三句是通過更改css來實現選中的效果
var index = res.data[i]['LAY_TABLE_INDEX'];
// $('tr[data-index=' + index + '] ').addClass('layui-table-click');
$('tr[data-index=' + index + '] input[type="radio"]').prop('checked', true);
$('tr[data-index=' + index + '] input[type="radio"]').next().addClass('layui-form-radioed');
$('tr[data-index=' + index + '] i').addClass('layui-anim-scaleSpring');
}
}
form.render('radio'); //layui表單中改變屬性一定要重新渲染
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
藍藍設計的小編 http://www.syprn.cn