Skip to content

Commit 4f1c923

Browse files
author
wangqi
committed
add 用css实现骨架屏效果.md
1 parent b8737b5 commit 4f1c923

File tree

2 files changed

+66
-0
lines changed

2 files changed

+66
-0
lines changed

_sidebar.md

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
* [calc() 函数](css/calc().md)
1616
* [伪元素empty](css/伪元素empty.md)
1717
* [破碎图片Tip](css/破碎图片Tip.md)
18+
* [用css实现骨架屏效果](css/用css实现骨架屏效果.md)
1819
* 同步博客
1920
* [你不知道的JavaScript(上) - 阅读笔记](syncDocs/javascript/你不知道的JavaScript_上.md)
2021
* [你不知道的JavaScript(中) - 阅读笔记](syncDocs/javascript/你不知道的JavaScript_中.md)

css/用css实现骨架屏效果.md

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# 骨架屏
2+
### 仿掘金骨架屏
3+
```html
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8">
8+
<title>Title</title>
9+
<style>
10+
.item {
11+
position: relative;
12+
width: 656px;
13+
height: 44px;
14+
margin: 0 auto;
15+
overflow: hidden;
16+
background: #f6f6f6;
17+
color: #fff;
18+
}
19+
.fix {
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
z-index: 2;
24+
}
25+
svg {
26+
color: #fff;
27+
}
28+
.placeHolder-bg {
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
width: 150%;
33+
height: 100%;
34+
background: -webkit-gradient(linear, left top, right top, from(#f6f6f6), color-stop(20%, #ebebeb), color-stop(40%, #f6f6f6), to(#f6f6f6));
35+
background: linear-gradient(90deg, #f6f6f6 0, #ebebeb 20%, #f6f6f6 40%, #f6f6f6);
36+
-webkit-animation: linear-double 1s linear 1ms infinite forwards;
37+
animation: linear-double 1s linear 1ms infinite forwards;
38+
}
39+
40+
@keyframes linear-double {
41+
0% {
42+
-webkit-transform: translateX(-56%);
43+
transform: translateX(-56%);
44+
}
45+
100% {
46+
-webkit-transform: translateX(56%);
47+
transform: translateX(56%);
48+
}
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
<div class='item'>
54+
<div class='fix'>
55+
<svg width="656" height="44" viewBox="0 0 656 44" class="PlaceHolder-mask">
56+
<path d="M0 0h656v44H0V0zm0 0h480v12H0V0zm0 32h238v12H0V32z" fill="currentColor" fill-rule="evenodd"></path>
57+
</svg>
58+
</div>
59+
<div class="placeHolder-bg"/>
60+
</div>
61+
</div>
62+
</body>
63+
</html>
64+
65+
```

0 commit comments

Comments
 (0)