iphoneX的诞生，让很多人对它的刘海感到非常大的好奇心，那对于我们前端开发的人来说，关注点就是在他的布局上面了，怎么实现字体环绕他进行滚动？让文字不会被刘海挡住。效果图如下：
CSS3里面针对这种特定形状环绕的效果已经支持很久了，CSS3 Shapes和CSS3 Regions都是可以实现的，接下来我们就用shapes来实现这一效果。
shape-outside属性要想生效，本身需要是浮动float元素。
本文demo效果实现使用的是shape-outside:polygon()，通过点坐标勾勒出和齐刘海形状相似的多边形形状，CSS代码如下
1
2
3
4
5
6
7
| .shape{
float: left;
width: 30px;
height: 340px;
shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);
transition: shape-outside .15s;
}
|
此时，后面没有设置BFC（块状格式化上下文）的列表元素就会自动环绕这个形状排列，也就是自动避开了齐刘海区域。
接着就是把刘海的图片覆盖在这个刘海区域上面，这样，刘海就做成了。
接着就是实现文字环绕刘海滚动的效果：
由于shape-outside所在的元素是浮动元素，因此，必定会跟着容器一起滚动，我们需要的效果是我们所绘制的这个刘海区域需要是固定的，那么我们就需要监听整个容器的滚动事件，将容器滚动的高度scrollTop加载每个刘海的纵坐标上面，具体代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script type="text/javascript">
var box=document.getElementById("box"); //这个是外层容器
var shape=document.getElementById("shape"); //这个是刘海容器
shape.style.height=box.scrollHeight+"px"; //这个的作用是将刘海的高度始终保持位置固定
var fn=function(){
var scrollTop=box.scrollTop; //获取容器滚动的高度
var shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)'; //将纵坐标加上scrollTop就实现了刘海固定的效果
shape.style.webkitShapeOutside = shapeOutside;//兼容性
shape.style.shapeOutside=shapeOutside;//将更新后的shapeOutside始终保持更新
};
//滚动监听
box.onscroll=function(){
fn();
}
fn();
</script>
|
兼容性
CSS Shapes的兼容性为Chrome浏览器和Safari浏览器（包括iOS）都是支持的，也就意味着我们是可以在iPhone上使用的，完美。只是需要注意的是在iOS10.2及其之前的版本，CSS Shapes的使用还是需要加webkit私有前缀的，但据说iPhone X至少默认iOS 11，而刘海头交互效果就是针对iPhone X处理的，因此webkit私有前缀不加也没关系。
demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| <!DOCTYPE html>
<html>
<head>
<title>刘海</title>
<style type="text/css">
.box{
width: 500px;
height: 450px;
margin: auto;
overflow: auto;
border:2px solid #000;
}
.shape{
float: left;
width: 30px;
height: 340px;
shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);
transition: shape-outside .15s;
}
.icon{
width: 24px;
height: 180px;
background: url(http://www.zhangxinxu.com/study/201709/liu.png) no-repeat left center;
position: absolute;
margin-top: 150px;
}
.content ul{
list-style: none;
margin: 0;
padding: 0;
}
.content li{
border-bottom: 1px solid #eee;
padding: 10px;
}
</style>
</head>
<body>
<div class="box" id="box">
<span class="shape" id="shape"></span>
<span class="icon"></span>
<div class="content">
<ul>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
<li>box1</li>
</ul>
</div>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var shape=document.getElementById("shape");
shape.style.height=box.scrollHeight+"px";
var fn=function(){
var scrollTop=box.scrollTop;
var shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)';
shape.style.webkitShapeOutside = shapeOutside;
shape.style.shapeOutside=shapeOutside;
};
box.onscroll=function(){
fn();
}
fn();
</script>
</body>
</html>
|
这样就实现了文字环绕刘海的效果
参考网站：地址1|地址2
作 者：陈焦滨&kevin
上一篇：Knockout
下一篇：TCP/IP协议族
