NiceFEeffect

整理各种好看好用的前端效果

tip： 项目中对于scss的转化，采用的是node-sass，见package.json中的scripts

运行命令：npm run sass (源文件) （目标文件） 比如：

npm run sass cutout/style.scss cutout/style.css

镂空效果 cutout文件夹

涉及到的知识点：mask

参考链接：

张鑫旭博客地址

所谓遮罩，就是原始图片只显示遮罩图片非透明的部分

最终想要得到的外观在mask中设置

遮罩透明的部分就是左右两个半圆，所以原始图片这两个半圆没有了，最后的形态就是遮罩的形态

我们很少使用jpg图片来作为遮罩图片的，因为jpg图片一定是完全不透明的，最终的效果就是原图什么也看不到。

虽然是遮罩，但是实际上就是遮罩长什么样，看到的效果就长什么样

大疆效果：dj.html

大疆效果图

几个知识点：

filter 滤镜属性 filter: blur(px) 高斯模糊

css实现抛物线效果

参考链接：

张鑫旭博客地址

小球围绕一个中心，在轨道上运动

ball-circle-run

兼容iphone x刘海的正确姿势

参考链接：

兼容iphone x刘海的正确姿势

viewport-fit=cover + safe-area-inset-*

关于 viewport-fit

viewport-fit 有3个值：

contain: 可视窗口完全包含网页内容（左图）
cover：网页内容完全覆盖可视窗口（右图）
auto：默认值，跟 contain 表现一致

constant(safe-area-inset-top)：在Viewport顶部的安全区域内设置量（CSS像素） constant(safe-area-inset-bottom)：在Viewport底部的安全区域内设置量（CSS像素） constant(safe-area-inset-left)：在Viewport左边的安全区域内设置量（CSS像素） constant(safe-area-inset-right)：在Viewport右边的安全区域内设置量（CSS像素）

简单来说我们可以通过 constant( ) 可以获取到非安全边距，再结合 padding 或 margin 来控制页面元素避开非安全区域。 Webkit在iOS11中新增CSS Functions: env( )替代constant( )，文档中推荐使用env( )，而 constant( ) 从Safari Techology Preview 41 和iOS11.2 Beta开始会被弃用。在不支持env( )的浏览器中，会自动忽略这一样式规则，不影响网页正常的渲染。为了达到最大兼容目的，我们可以 constant( ) 和 env( ) 同时使用。

.yourFooterClass {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
}

新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

liiiku/NiceFEeffect

NiceFEeffect