借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
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代码:
<div id="box" class="box">
<i id="shape" class="shape"></i>
<i class="liuhai"></i>
<div class="content">
<ul>
<li>为了防止看花眼</li>
<li>我就手动敲下面的文字</li>
<li>原本我偷懒</li>
...
<li>理论上还可以使用CSS region实现</li>
<li>但没有这个方法容易理解</li>
</ul>
</div>
</div>
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 Shapes实现元素滚动自动环绕iPhone X的刘海的更多相关文章
- 奇妙的 CSS shapes(CSS图形)
CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...
- 奇妙的 CSS shapes(CSS图形) 【css 图形,绘图,CSS 几何图形)】
http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...
- CSS shapes布局教程
文章参考至 一.前言&索引 CSS Shapes布局可以实现不规则的文字环绕效果,需要和浮动配合使用. 兼容性如下图: 还是很不错的,移动端可用,内部中后台项目可用. CSS shapes布局 ...
- CSS根据屏幕分辨率宽度自动适应的办法
CSS根据屏幕分辨率宽度自动适应的办法 第一种办法是js选择CSS <SCRIPT language=JavaScript><!-- Beginif (screen.width == ...
- css float父元素高度塌陷
css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...
- h5之scrollIntoView控制页面元素滚动
如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...
- 使用CSS实现无滚动条滚动
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放 ...
- 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位
块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
随机推荐
- cache、session、cookie的区别
session把数据保存在服务器端,每一个用户都有属于自己的Session,与别人的不冲突就是说,你登陆系统后,你的信息(如账号.密码等)就会被保存在服务器上一个单独的session中,当你退出系统后 ...
- Laravel 5.2控制器--为什么命令行创建控制器的时候会报错?
今天我遇到过一种情况:就是之前创建的控制器名称想更改(仅仅只是大小写问题而已),然后用命令行重新创建新的名称的控制器. 结果就报错了? [ReflectionException] Class App\ ...
- 1)django-建立步骤和目录说明
一:前言 django是python最流行的WEB框架. 二:django安装 pip install django 三:django项目建立步骤 1.创建django工程 django-admin ...
- Flume集群搭建
0. 软件版本下载 http://mirror.bit.edu.cn/apache/flume/ 1. 集群环境 Master 172.16.11.97 Slave1 172.16.11.98 S ...
- VMware虚拟机安装Linux系统centos7(一)
1.安装虚拟机(自行百度) 2.编辑虚拟机设置 光驱设置,镜像选择:(也可设置2核2G,基于自己计算机选择!) 3.点击开启此虚拟机(上下键选择安装,回车) 4.选择语言 5.设置 如果想安装图形化界 ...
- Java调用oracle存储过程通过游标返回临时表数据
注:本文来源于 < Java调用oracle存储过程通过游标返回临时表数据 > Java调用oracle存储过程通过游标返回临时表数据 项目开发过程中,不可避免的会用到存储过程返回结 ...
- IE11总是有缓存的问题
F12,里面选择网络,始终从服务器刷新..
- LeetCode(93): 复原IP地址
Medium! 题目描述: 给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255. ...
- 【python】多进程共享变量
有一个字典变量,需要在多个进程间共享 使用Manager, 下面是一个小例子. 注意使用json前需要将类型转换. #!/usr/bin/python # coding=utf-8 import js ...
- laravel CSRF 保护
在开始之前让我们来实现上述表单访问伪造的完整示例,为简单起见,我们在路由闭包中实现所有业务代码: Route::get('task/{id}/delete', function ($id) { ret ...