• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

CSS Shapes实现iPhone X的刘海

JAVA web前端中文站 2年前 (2017-10-08) 1121次浏览 已收录 0个评论

iPhone X 发布后,被刘海刷屏了。大多数都在吐槽刘海,不仅是美观上的,还有开发上的。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

iPhone 为了 iPhone X 发布了新的开发者规范,针对 iPhone X 的适配发布了一些标准和建议。开发者规范能针对 iPhone X 进行一些优化。

附上一篇网友在知乎上关于 iPhone X 的设计规范。如何评价新版 iPhone X 的设计规范?

今天我们不讲 iPhone X 的设计规范,我们来使用 CSS 技术来模仿一个 iPhone X 的刘海,并实现滚动页面内容后,元素滚动自动环绕 iPhone X 的刘海。

CSS Shapes 实现 iPhone X 的刘海

上图就是我们要实现的效果。

环绕齐刘海滚动实现的原理

CSS Shapes 中有个 CSS 属性名为 shape-outside,可以让内联元素以不规则的形状进行外部排列,其语法如下:

 /* 关键字值 */ shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box; /* 函数值 */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); /* <url>值 */ shape-outside: url(image.png); /* 渐变值 */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

shape-outside 属性要想生效,本身需要是浮动 float 元素。

本文 demo 效果实现使用的是 shape-outside:polygon(),通过点坐标勾勒出和齐刘海形状相似的多边形形状,CSS 代码为:

 .shape {   float: left;   shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0); }

由于 shape-outside 所在的元素是浮动元素,因此,必定会跟着容器一起滚动,我们需要的效果是我们所绘制的这个刘海区域需要是固定的,怎么办?此时,我是借助 JavaScript 处理的。

原理很简单,监听容器的滚动事件,让我们的 shape-outside 绘制的区域实时偏移滚动的大小。此时肉眼看上去的效果就是 shape-outside 区域永远固定在了滚动容器 clientHeight 的中间。

整个效果就这么实现了,相关 JS 如下:

 box.addEventListener('scroll', function () {   var scrollTop = box.scrollTop;   // 滚动偏移应用在 shape-outside 上   shape.style.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)'; });

CSS Shapes 环绕 iPhone X 刘海的其它更简易方法

如果我们的技术选型是更看重简单易懂,而不是资源消耗与占用,还可以使用 shape-outside:url(image.png)语法实现类似的效果,其中'image.png'就是用来被环绕的图片,环绕与否是基于计算 alpha 通道决定,用句简单的话描述,就是沿着图片非透明区域环绕。

由于使用 url()的形状计算是基于图片元素,和 inset(), circle(), ellipse()或者 polygon()这些基础形状方法的计算性质不一样,因此,可以直接使用垂直方向的 margin 进行偏移。这要比 polygon()这样实时计算坐标位置要好理解的多。

我们不妨看下 CSS 和 JS 代码,如下:

 .shape {   float: left;   shape-outside: url(liu-outside.png);   margin-top: 150px; }
 box.addEventListener('scroll', function () {   var scrollTop = box.scrollTop;   // 滚动偏移应用在 margin-top 上   shape.style.marginTop = (150 + scrollTop) + 'px'; });

可以看到,当我们滚动容器的时候,改变的就一个 marginTop 值就好了;而上面的 shape-outside:polygon()实现需要同时改变多个坐标值。

CSS Shapes 的兼容性

CSS Shapes 的兼容性为 Chrome 浏览器和 Safari 浏览器(包括 iOS)都是支持的,也就意味着我们是可以在 iPhone 上使用的,完美。只是需要注意的是在 iOS10.2 及其之前的版本,CSS Shapes 的使用还是需要加 webkit 私有前缀的,但据说 iPhone X 至少默认 iOS 11,而刘海头交互效果就是针对 iPhone X 处理的,因此 webkit 私有前缀不加也没关系。

参考资料

  • shape-outside

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS Shapes 实现 iPhone X 的刘海
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址