整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
這是一個純CSS實(shí)現(xiàn)的Loading特效，包括棱形鏈條的動畫效果。該特效可以被用于網(wǎng)站、應(yīng)用程序等需要加載時的等待效果。
使用CSS3的@keyframes屬性實(shí)現(xiàn)動畫效果。通過調(diào)整不同幀的關(guān)鍵幀，可以實(shí)現(xiàn)不同的動畫效果。在這個Loading特效中，我們使用了transform屬性來旋轉(zhuǎn)棱形，以及animation-delay屬性來延遲動畫的開始時間，從而使得多個棱形可以錯開旋轉(zhuǎn)。
圖片裁切為菱形是一種常見的設(shè)計(jì)手法，那么怎么在CSS中實(shí)現(xiàn)呢？
把圖片用一個div包裹起來，然后rotate一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
display: flex;
justify-content: center;
align-content: center;
padding: 100px;
}
.picture{
width: 300px;
transform: rotate(45deg);
overflow: hidden;
border: 1px red solid;
}
.picture >img{
max-width: 100%;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="picture">
<img src="../img/cat.png" alt="">
</div>
</body>
</html>從上圖中我們可以看到，它并沒有一步到位地直接達(dá)到我們期望的效果，而是成了一個八角型。
max-width：100%，會被解析成.picture邊長。但是我們想讓圖片的寬度與容器的對角線相等，而不是與邊長相等。所以我們可以把max-width的邊長設(shè)置為√2x100% + 100% = 142%。但是這里用scale()把變形樣式放大會更合理，因?yàn)閟cale是以中心點(diǎn)進(jìn)行縮放，而通過width是通過左上角為原點(diǎn)進(jìn)行縮放。
.picture >img{
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
</style>
</head>
<body>
<img src="../img/cat.png" alt="">
</body>
</html>polygon() - 多邊形，它允許我們用一系列（以逗號分隔的）坐標(biāo)點(diǎn)來指定任意的多邊形，我們甚至可以使用百分比值，它們會解析為元素自身的尺寸。
還可以做動畫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s clip-path;
}
img:hover{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
</style>
</head>
<body>
<img src="../img/cat.png" alt="">
</body>
</html>天找一個 ? 點(diǎn)的符號 • 查到了這張表，分享出來。
HTML符號
1.特色的
| ? | © | ? | 版權(quán)標(biāo)志 |
| | | | | 豎線，常用作菜單或?qū)Ш街械姆指舴?/td> | |
| · | · | · | 圓點(diǎn)，有時被用來作為菜單分隔符 |
| ↑ | ↑ | ↑ | 上箭頭，常用作網(wǎng)頁“返回頁面頂部”標(biāo)識 |
| € | € | € | 歐元標(biāo)識 |
| 2 | ² | 2 | 上標(biāo)2，數(shù)學(xué)中的平方，在數(shù)字處理中常用到，例如：10002 |
| ? | ½ | ? | 二分之一 |
| ? | ♥ | ? | 心型，用來表達(dá)你的心 |
2常用的
| | 空格 | ||
| & | & | & | and符號，與 |
| " | " | " | 引號 |
| ? | © | ? | 版權(quán)標(biāo)志 |
| ? | ® | ? | 注冊標(biāo)志 |
| ? | ™ | ? | 商標(biāo)標(biāo)志 |
| “ | “ | “ | 左雙引號 |
| ” | ” | ” | 右雙引號 |
| ‘ | ‘ | ‘ | 做單引號 |
| ’ | ’ | ’ | 右單引號 |
| ? | « | ? | 左三角雙引號 |
| ? | » | ? | 右三角雙引號 |
| ? | ‹ | ? | 左三角單引號 |
| ? | › | ? | 右三角單引號 |
| § | § | § | 章節(jié)標(biāo)志 |
| ? | ¶ | ? | 段落標(biāo)志 |
| ? | • | ? | 列表圓點(diǎn)（大） |
| · | · | · | 列表圓點(diǎn)（中） |
| … | … | … | 省略號 |
| | | | | 豎線 | |
| | | ¦ | | | 斷的豎線 |
| – | – | – | 短破折號 |
| — | — | — | 長破折號 |
3.貨幣類
| ¤ | ¤ | ¤ | 一般貨幣符號 |
| $ | $ | 美元符號 | |
| ￠ | ¢ | ￠ | 分 |
| ￡ | £ | ￡ | 英鎊 |
| ￥ | ¥ | ￥ | 日元 |
| € | € | € | 歐元 |
4 數(shù)學(xué)類
| < | < | < | 小于號 |
| > | > | > | 大于號 |
| ≤ | ≤ | ≤ | 小于等于號 |
| ≥ | ≥ | ≥ | 大于等于號 |
| × | × | × | 乘號 |
| ÷ | ÷ | ÷ | 除號 |
| ? | − | ? | 減號 |
| ± | ± | ± | 加/減 號 |
| ≠ | ≠ | ≠ | 不等于號 |
| 1 | ¹ | 1 | 上標(biāo)1 |
| 2 | ² | 2 | 上標(biāo)2 |
| 3 | ³ | 3 | 上標(biāo)3 |
| ? | ½ | ? | 二分之一 |
| ? | ¼ | ? | 四分之一 |
| ? | ¾ | ? | 四分之三 |
| ‰ | ‰ | ‰ | 千分率 |
| ° | ° | ° | 度 |
| √ | √ | √ | 平方根 |
| ∞ | ∞ | ∞ | 無限大 |
5.方向類
| ← | ← | ← | 左箭頭 |
| ↑ | ↑ | ↑ | 上箭頭 |
| → | → | → | 右箭頭 |
| ↓ | ↓ | ↓ | 下箭頭 |
| ? | ↔ | ? | 左右箭頭 |
| ? | ↵ | ? | 回車箭頭 |
| ? | ⌈ | ? | 左上限 |
| ? | ⌉ | ? | 右上限 |
| ? | ⌊ | ? | 左下限 |
| ? | ⌋ | ? | 右下限 |
6 其它
| ? | ♠ | ? | 黑桃 |
| ? | ♣ | ? | 梅花 |
| ? | ♥ | ? | 紅桃，心 |
| ? | ♦ | ? | 方塊牌 |
| ? | ◊ | ? | 菱形 |
| ? | † | ? | 匕首 |
| ? | ‡ | ? | 雙劍號 |
| ? | ¡ | ? | 反向感嘆號 |
| ? | ¿ | ? | 反向問號 |
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
