整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
这是一个纯CSS实现的Loading特效，包括棱形链条的动画效果。该特效可以被用于网站、应用程序等需要加载时的等待效果。
使用CSS3的@keyframes属性实现动画效果。通过调整不同帧的关键帧，可以实现不同的动画效果。在这个Loading特效中，我们使用了transform属性来旋转棱形，以及animation-delay属性来延迟动画的开始时间，从而使得多个棱形可以错开旋转。
图片裁切为菱形是一种常见的设计手法，那么怎么在CSS中实现呢？
把图片用一个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>从上图中我们可以看到，它并没有一步到位地直接达到我们期望的效果，而是成了一个八角型。
max-width：100%，会被解析成.picture边长。但是我们想让图片的宽度与容器的对角线相等，而不是与边长相等。所以我们可以把max-width的边长设置为√2x100% + 100% = 142%。但是这里用scale()把变形样式放大会更合理，因为scale是以中心点进行缩放，而通过width是通过左上角为原点进行缩放。
.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() - 多边形，它允许我们用一系列（以逗号分隔的）坐标点来指定任意的多边形，我们甚至可以使用百分比值，它们会解析为元素自身的尺寸。
还可以做动画：
<!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>天找一个 • 点的符号 • 查到了这张表，分享出来。
HTML符号
1.特色的
| © | © | © | 版权标志 |
| | | | | 竖线，常用作菜单或导航中的分隔符 | |
| · | · | · | 圆点，有时被用来作为菜单分隔符 |
| ↑ | ↑ | ↑ | 上箭头，常用作网页“返回页面顶部”标识 |
| € | € | € | 欧元标识 |
| ² | ² | ² | 上标2，数学中的平方，在数字处理中常用到，例如：1000² |
| ½ | ½ | ½ | 二分之一 |
| ♥ | ♥ | ♥ | 心型，用来表达你的心 |
2常用的
| | 空格 | ||
| & | & | & | and符号，与 |
| " | " | " | 引号 |
| © | © | © | 版权标志 |
| ® | ® | » | 注册标志 |
| ™ | ™ | ™ | 商标标志 |
| “ | “ | “ | 左双引号 |
| ” | ” | ” | 右双引号 |
| ‘ | ‘ | ‘ | 做单引号 |
| ’ | ’ | ’ | 右单引号 |
| « | « | « | 左三角双引号 |
| » | » | » | 右三角双引号 |
| ‹ | ‹ | ‹ | 左三角单引号 |
| › | › | › | 右三角单引号 |
| § | § | § | 章节标志 |
| ¶ | ¶ | ¶ | 段落标志 |
| • | • | • | 列表圆点（大） |
| · | · | · | 列表圆点（中） |
| … | … | … | 省略号 |
| | | | | 竖线 | |
| ¦ | ¦ | ¦ | 断的竖线 |
| – | – | – | 短破折号 |
| — | — | — | 长破折号 |
3.货币类
| ¤ | ¤ | ¤ | 一般货币符号 |
| $ | $ | 美元符号 | |
| ¢ | ¢ | ¢ | 分 |
| £ | £ | £ | 英镑 |
| ¥ | ¥ | ¥ | 日元 |
| € | € | € | 欧元 |
4 数学类
| < | < | < | 小于号 |
| > | > | > | 大于号 |
| ≤ | ≤ | ≤ | 小于等于号 |
| ≥ | ≥ | ≥ | 大于等于号 |
| × | × | × | 乘号 |
| ÷ | ÷ | ÷ | 除号 |
| − | − | − | 减号 |
| ± | ± | ± | 加/减 号 |
| ≠ | ≠ | ≠ | 不等于号 |
| ¹ | ¹ | ¹ | 上标1 |
| ² | ² | ² | 上标2 |
| ³ | ³ | ³ | 上标3 |
| ½ | ½ | ½ | 二分之一 |
| ¼ | ¼ | ¼ | 四分之一 |
| ¾ | ¾ | ¾ | 四分之三 |
| ‰ | ‰ | ‰ | 千分率 |
| ° | ° | ° | 度 |
| √ | √ | √ | 平方根 |
| ∞ | ∞ | ∞ | 无限大 |
5.方向类
| ← | ← | ← | 左箭头 |
| ↑ | ↑ | ↑ | 上箭头 |
| → | → | → | 右箭头 |
| ↓ | ↓ | ↓ | 下箭头 |
| ↔ | ↔ | ↔ | 左右箭头 |
| ↵ | ↵ | ↵ | 回车箭头 |
| ⌈ | ⌈ | ⌈ | 左上限 |
| ⌉ | ⌉ | ⌉ | 右上限 |
| ⌊ | ⌊ | ⌊ | 左下限 |
| ⌋ | ⌋ | ⌋ | 右下限 |
6 其它
| ♠ | ♠ | ♠ | 黑桃 |
| ♣ | ♣ | ♣ | 梅花 |
| ♥ | ♥ | ♥ | 红桃，心 |
| ♦ | ♦ | ♦ | 方块牌 |
| ◊ | ◊ | ◊ | 菱形 |
| † | † | † | 匕首 |
| ‡ | ‡ | ‡ | 双剑号 |
| ¡ | ¡ | ¡ | 反向感叹号 |
| ¿ | ¿ | ¿ | 反向问号 |
*请认真填写需求信息，我们会在24小时内与您取得联系。
