借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海

最新推荐文章于 2024-04-18 17:08:09 发布
最新推荐文章于 2024-04-18 17:08:09 发布
阅读量308 收藏
点赞数
分类专栏： css 文章标签： iphone css

CSS Shapes中有个CSS属性名为shape-outside，可以让内联元素以不规则的形状进行外部排列
shape-outside属性要想生效，本身需要是浮动float元素。




Document

dxj124
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS开发适配iPhone X 齐刘海处理,代码适配iPhoneX
刘祺旭的技术博客
09-21 3万+
我的简书新地址,欢迎点击查看哦~ 今天手头工作完事了,然后升级了Xcode9,变化很大啊,先说大家一直关心的适配齐刘海吧. 这个东西好像出来之后 我QQ群里面iOS开发的很多人都炸了.确实这个齐刘海对我们开发者很不友好,往上xib的项目适配文章已经有了,但是还没有特别好的纯代码工程的适配.今天我就抛砖引玉,简单说一下我的纯代码工程是如何进行适配的. 首先先说一下,如果你刚刚升级Xcode9之后
iPhone X Web前端页面适配(处理可爱的刘海)
qq814374557的博客
11-30 9707
一、两个概念iPhone X和IOS 11的发布，不在许多技术方面造成了一定的冲击，前端也不可以避免地也受到影响，因为iPhone X刘海的影响，在编写前端页面的时候要做一些处理，下面先提出一些新的概念。安全区域 因为刘海的关系，所有的展示都会放在一个叫做safe-area的区域，如下图(1-1)，主要是为了防止显示的内容被刘海传感器(house sensor)，圆角边框(rounded cor
Shape-memory Alloys Handbook
10-15
Shape-memory Alloys Handbook
CSS3新特性
qq_42451776的博客
08-08 162
文章目录渐变颜色渐变之线性渐变颜色渐变之径向渐变颜色结点不均匀分布的径向渐变吸顶过渡效果(完成后会回到原处)transform完成2d动画平移旋转旋转中心的设置：缩放斜切扩展：旋转并位移transform完成3d动画扩展：井深透视动画常用属性具体的动画示例滤镜(filter)blur (高斯模糊)grayscale(灰度)opacity(透明程度)label扩展使用postcss完成添加浏览器前缀文字环绕自定义滚动条隐藏滚动条css实现三角形0.5px的实现页面导入样式时，使用link和@import有什么
CSS3 Shape详解
cwyp18809的博客
03-25 2240
目录 一、 CSS Shapes简介 1、 功能简介 2、 浏览器支持 目前支持以下版本： 二、 怎样使用CSS Shapes 1、 shape-outside属性 2、Shape的参考盒模型 三、 CSS Shapes拓展 1、 利用图片来定义一个形状 四、 Shape工具 方块套方块:这是我们网页一直以来的样子。通过使用CSS，我们一...
css shape-outside 多边形文字环绕
qq_40047198的博客
04-08 3608
shape-outside 实用场景： 圆形： 第一个值代表半径 shape-outside: circle(50%); 椭圆： 第一个值代表半径；第二个值代表半径 shape-outside: ellipse(60px 80px); 多边形： 最少3个值，也就是说，至少要3个点组成一个三角形，每个点有x，y方向移动的两个值（均从左上方开始移动）。 shape-out...
通过shape-outside来设置文字环绕时的形状
weixin_33769125的博客
09-24 467
现在真是越来越注重用户体验了，而“shape-outside”就是其中一个能让网页排版更友好的一个属性。 默认文字是根据图片的边进行的。 但现在我们完全有能力去改变这一行为，下面是通过shape-outside来实现文字根据白色的那个圈圈来排版的，虽然不是很精确。 来看看代码 <style> img{ width:600px; height:500px; ...
Css实现刘海,使用CSS Shapes实现滚动环绕iPhone X刘海效果
weixin_42512613的博客
08-03 321
一、iPhone X的刘海发型和衍生的交互iPhone X造型上有个显著的特质，就是有个明显的刘海。然后，也出现了一些酷酷的交互。就是页面滚动的时候，列表会自动绕着iPhone X的刘海排列。初看起来，好像觉得这个效果实现很难，实际上，CSS3里面针对这种特定形状环绕的效果已经支持很久了，CSS3 Shapes和CSS3 Regions都是可以实现的，本文就将展示如何使用CSS3 Shapes实现...
【第1107期】iPhone X 适配 手Q H5页面通用解决方案
前端早读课
11-12 1669
前言 前段时间一堆App更新其中有一条原因就是适配iPhoneX。现在QA也逐渐也iPhoneX的bug给开发了，那如何去适配新机型呢？今日早读文章由腾讯ISUX分享。 正文从这开始· 目前的 H5 页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下： 通栏页面 顶部通栏 某些业务的一级页面多数使用了顶部通栏 banner 的效果，由于 iPhone X 在状态
CSS图形编辑器「CSS Shapes Editor」-crx插件
03-09
0％100％Shapes边栏：DevTools Elements面板的新边栏名为“ Shapes”，该边栏提供控件来创建和编辑所选元素上CSS Shapes值，例如polygon（），circle（）和ellipse（） 。 多边形：单击形状的边缘以添加新点。 拖...
CSS Shapes Editor-crx插件
04-01
示例0 100％=> 0％100％Shapes边栏：DevTools Elements面板的新边栏名为“ Shapes”，该边栏提供控件来创建和编辑所选元素上CSS Shapes值，例如polygon（），circle（）和ellipse（） 。 多边形：单击形状的边缘以...
CSS Floating: Floats and Float Shapes
11-07
高清 有书签，文字版。
css-shapes-editor:用于 CSS 形状的独立浏览器内编辑器
06-04
CSS 形状编辑器用于直接在浏览器中交互式编辑 CSS 形状值的 JavaScript 库。 它适用于polygon() 、 circle()和ellipse()等功能值。演示有关demo/请参阅demo/文件夹。基本用法将dist/CSSShapesEditor.js加载到页面中...
CSS适配刘海屏的几种方式
BY_xueke的个人空间
06-08 4679
前言 前些年的iphone X一出现 手机厂商纷纷取消了实体的物理按键，ios取而代之的是底部的一个大横条 安卓这边基本上也有不少虚拟按键的厂商 就会导致一些比较奇葩的问题出现 比如 这种的情况的发生，或者说刘海屏，挖孔屏 一般来说这种时候，都需要我们前端去进行设备适配。 适配之前需要了解的几个新知识 安全区域 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）的影响，以及横屏状态下他们的影响。 更详
L - Picture
Sinhaeng_Hhjian
10-31 306
Give you the width and height of the rectangle,darw it. Input Input contains a number of test cases.For each case ,there are two numbers n and m (0 < n,m < 75)indicate the width and height of the
Mouth Shapes(AE图层切换嘴型动画脚本)v1.0版本更新啦
绿色软件联盟协会
08-29 431
Mouth Shapes是一款AE图层切换嘴型动画脚本，只需要点击一个按钮，即可让嘴唇同步变得容易。 在创建角色动画时，这是一个非常有效的工具，但它也为您的后期效果工作流程提供了一个强大的资源。 使用方法 1.复制MouthShapes.jsxbin和MouthShapes文件夹到AE脚本目录： Win：...Adobe After Effects CC\Support Files\Sc...
Filling Basic Shapes：填充基本图形
Javahaoshuang3394的专栏
06-05 721
There are two ways to fill basic shapes like lines and rectangles.#有两种方法来填充基本图形，像线和矩形The first is to use specific drawing methods like Graphics.fillOval().#第一种方法是使用特殊的画图方法，比如Graphics.fillOval(
苹果iPhone手机发抖音短视频如何挂载词令抖音小程序？
最新发布
2401_82908787的博客
04-18 101
4、视频发布成功，用户即可在观看短视频时看到已挂载的抖音小程序，点击即可打开抖音小程序；1、苹果iPhone手机打开要挂载的抖音小程序，并点击右上角的「···」；3、选择要上传的短视频，抖音小程序已添加到要挂载的短视频；2、点击打开后，选择「拍抖音」；
vba如何实现有数据的区域自动截图
06-09
要在 VBA 中实现有数据的区域自动截图，可以使用以下代码： ``` Sub CaptureScreenshot() Dim myChart As ChartObject Dim chartRange As Range Dim chartWidth As Double, chartHeight As Double ' Select ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值