Css实现刘海,CSS3 Shapes实现列表自动环绕iPhone X刘海头

展示

为了防止看花眼

我就手动敲下面的文字

原本我偷懒

直接就是列表1，列表2

后来测试发现不行

内容太接近

滚动时候

无法准确感受到靠近效果

这样是不行的

做东西就要精益求精

demo页面也应如此

然后这里的刘海形状只是近似

两个圆角要模拟

需要更细致的shape-outside设置

这里仅仅使用两个转角点表示

而且为了和后面的内容有间隙

shape区域右侧

刻意扩大了大约5像素

现在看到的刘海

是覆盖上面的一个图

实际生效的是后面浮动的shape

在iOS 10.2之前还需要webkit

私有前缀

因此，实际代码还需要webkit

Chrome可以不需要

然后此功能需要JS配合

只能对内联信息进行跟随控制

理论上还可以使用CSS region实现

但没有这个方法容易理解

代码

CSS代码：

.box {

max-width: 414px;

height: 480px;

border: solid #000;

margin: auto;

overflow: auto;

}

.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;

}

.liuhai {

width: 24px; height: 180px;

background: url(liu.png) no-repeat left center;

position: absolute;

margin-top: 150px;

}

.content ul {

list-style: none;

padding: 0;

margin: 0;

}

.content li {

border-bottom: 1px solid #eee;

padding: .5em;

}

HTML代码：

为了防止看花眼
我就手动敲下面的文字
原本我偷懒

...

理论上还可以使用CSS region实现但没有这个方法容易理解

JS代码：

var eleShape = document.getElementById('shape');

var eleBox = document.getElementById('box');

// 保证shape元素高度足够

eleShape.style.height = eleBox.scrollHeight + 'px';

var funShape = function () {

var scrollTop = eleBox.scrollTop;

// 滚动偏移应用在shape-outside上

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)';

eleShape.style.shapeOutside = shapeOutside;

};

// 滚动时候实时改变shape形状

eleBox.addEventListener('scroll', funShape);

funShape();

Css实现刘海,CSS3 Shapes实现列表自动环绕iPhone X刘海头 » 张鑫旭-鑫空间-鑫生活...相关推荐

借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海 #精选JAVASCRIPTCSSCHROMECSS3APPLE
一.iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质,就是有个明显的刘海. 然后,也出现了一些酷酷的交互. 例如下面这个交互: 交互视频效果戳这里体验:http://t.c ...
借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
一.iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质,就是有个明显的刘海. 然后,也出现了一些酷酷的交互. 例如下面这个交互: 交互视频效果戳这里体验:http://t.c ...
Css实现刘海,使用CSS Shapes实现滚动环绕iPhone X刘海效果
一.iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质,就是有个明显的刘海. 然后,也出现了一些酷酷的交互. 就是页面滚动的时候,列表会自动绕着iPhone X的刘海排列. ...
iphone桌面滑动效果html5,使用CSS Shapes实现滚动环绕iPhone X刘海效果
一.iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质,就是有个明显的刘海. 然后,也出现了一些酷酷的交互. 例如下面这个交互视频效果:http://t.cn/Rp01GKc ...
css参考手册css3手册_CSS手册：面向开发人员CSS便捷指南
css参考手册css3手册 I wrote this article to help you quickly learn CSS and get familiar with the advanced ...
CSS计数器(序列数字字符自动递增)详解———张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可 ...
css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）
css3-5 css3鼠标.列表和尺寸样式怎么用(文字有关的样式会被继承) 一.总结一句话总结:css标签中文字有关的样式会被继承.由常用样式记起. 1.鼠标常用样式有哪些? cursor:poi ...
帆软列表自动滚动脚本
帆软列表自动滚动脚本使用该脚本时,需将 'REPORT0' 替换为自己报表块的名字展示效果如下图: setTimeout(function() {//隐藏报表块report0的滚动条(此报表块名 ...
什么是css选择器？css3中5种常见的基本选择器-web前端教程
本章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一:什么是css选择器? CSS是一种用于屏幕上渲染html, ...

Css实现刘海,CSS3 Shapes实现列表自动环绕iPhone X刘海头 » 张鑫旭-鑫空间-鑫生活...

Css实现刘海,CSS3 Shapes实现列表自动环绕iPhone X刘海头 » 张鑫旭-鑫空间-鑫生活...相关推荐

最新文章

热门文章