关于css:CSS-整块文本溢出省略特性探究布局效率提高一个层次使用-mask-实现视频弹幕人物遮罩过滤-思否技术周刊

CSS 是一种用来体现 HTML 或 XML 等文件款式的计算机语言，置信敌人们对它都不生疏，今日给大家整顿一个与 CSS 小技巧相干的合集，心愿为大家提供一些设计新思路~

CSS 有各种玩转的形式，一起来看看吧~

明天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。

文本超长打点

咱们都晓得，到明天（2021/03/06），CSS 提供了两种形式便于咱们进行文本超长的打点省略。

对于单行文本，应用单行省略：

{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

而对于多行文本的超长省略，应用 -webkit-line-clamp 相干属性，兼容性也曾经十分好了：

{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

CodePen Demo — inline-block 实现整块的溢出打点

https://codepen.io/Chokcoco/p…

问题一：超长文本整块省略

问题二：iOS 不反对整块超长溢出打点省略

身为一个前端开发者，背景是开发中的常客。大到整个网站的主题背景，小到一个按钮的背景。CSS 的 background 属性基本上每天开发都会遇到，绝大多数状况下咱们都只会应用到了纯色背景或者图片背景。如果你想让你开发的内容看起来更加生动有趣，通过本文让你用纯 CSS 也能够开发出炫酷的背景。

开始之前

在开始之前，先请你答复上面的问题，如果你能全副答复正确，阐明你对 background 属性把握的还不错哦！

1. 径向突变默认形态是什么？

A：原型 B：椭圆形

background 属性的值为多个时，哪个值的图层在最顶部？

A：第一个值 B：最初一个值

background: green, linear-gradient(red, pink); 成果是什么？

A：绿色背景 B：红粉突变背景 C：没有背景

当 background 属性有多个值时，如何指定每层背景的大小？

根底背景

首先还是先回顾一下根底背景有哪些，最简略的就是纯色背景：

background: pink;

线性突变，当然你还能够自定义方向：

.linear {background: linear-gradient(red, pink);
}
.linear1 {background: linear-gradient(145deg, red 20%, pink);
}

径向突变

background: radial-gradient(red, pink);

角向突变

background: conic-gradient(red, pink);background: conic-gradient(red, pink);background: radial-gradient(red, pink);

根底背景扩大

纯色背景就没什么可说的了，只能扭转色彩。

1、线性背景

2、径向背景

3、角向突变

4、组合背景

有很多 CSS 属性，有些人不理解，或者他们理解它们，然而遗记在须要时应用它们。其实，有时候咱们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这能够大大节约咱们编码的工夫。

作为前端开发人员，咱们常常会遇到这样的事件。所以我问本人，为什么不搞篇文章列出所有那些较少应用但既有用又乏味的 CSS 属性？

在本文中，我将介绍一些不一样的 CSS 属性，心愿能给你带来点新鲜感，废话不多说，让咱们开始吧。

在 CSS 网格中应用 Place-Items

咱们只需应用两行 CSS 代码就能够将元素程度和垂直居中。

HTML

<div class="hero">
    <div class="hero-wrapper">
        <h2>CSS is awesome</h2>
        <p>Yes, this is a hero section made for fun.</p>
        <a href="#">See more</a>
    </div>
</div>

CSS

.hero {
    display: grid;
    place-items: center;
}

place-items 是将 justify-items 和 align-items 联合在一起的简写属性。下面的代码等同于上面代码：

.hero {
    display: grid;
    justify-items: center;
    align-items: center;
}

你可能想晓得，这是怎么回事? 咱们来解释一下。当应用 place-items 时，它将利用于网格中的每个单元格，也就是说单元格的内容都会居中。如果咱们多减少几个单元格就会很清晰明了：

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
}

Flexbox 与 margin 的配合

与 flexbox 联合应用，margin: auto 能够十分轻松地将 flex 我的项目程度和垂直居中。

html

<div class="parent">
    <div class="child"></div>
</div>

css

.parent {
    width: 300px;
    height: 200px;
    background: #ccc;
    display: flex;
}
.child {
    width: 50px;
    height: 50px;
    background: #000;
    margin: auto;
}

看起来有点酷 ????

列表的 marker 属性

text-align 属性

display: inline-Flex 属性

column-rule 属性

background-repeat: round

object-fit 属性

响应式 Web 设计旨在为各种设施（从台式机显示器到手机）提供最佳的浏览体验。本文汇总了一些优良的响应式 Web 设计 HTML 和 CSS 框架。这些框架都是开源的并收费的。

对响应式 Web 框架进行比拟并不那么容易。有的框架适宜设计更快、更精简网站的某些性能，而有些可能提供了大量性能、插件和附加组件，然而可能体积会比拟宏大并且上手较难。

1. Bootstrap

Bootstrap 是最风行的 HTML、CSS 和 JS 框架，用于在 Web 上开发响应式、挪动优先我的项目。Bootstrap 使前端开发更快、更轻松。他们提供了大量的文档、示例和演示，能够帮你疾速进行响应式 Web 开发。在 Bootstrap 5 中做了一些重大更改，例如随便应用 jQuery 并增加了 RTL 反对，再加上现成的组件和工具类，使 Bootstrap 成为 Web 开发人员的最佳抉择之一。

你还能够找到许多收费的高级 bootstrap 模板和 UI 工具包，这使你的开发过程更加轻松。

官网：https://getbootstrap.com/

2. Tailwind CSS

Tailwind 提供了一种基于实用工具的古代办法来构建响应站点。它有大量的实用工具类，无需编写 CSS 即可构建古代网站。它与其它框架的不同之处在于须要通过开发设置来放大最终 CSS 的大小，因为如果应用默认值，最终将会失去一个很大的 CSS 文件。Tailwind 可能疾速将款式增加到 HTML 元素中，并提供了大量的开箱即用的设计款式。这里有大量的 Tailwind CSS 资源：

https://superdevresources.com…

官网：https://tailwindcss.com/

3. Tachyons

Tachyons 也是一个基于实用工具的 CSS 库，它提供了许多即装即用的简单性能，无需本人编写大量 CSS。这样做的益处是 Tachyons 的开箱即用款式很笨重，不须要其余设置。如果需要的话，依然能够通过一些办法来减小尺寸。如果你须要易用的实用工具库，那么这应该是一个不错的抉择。

官网：https://tachyons.io/

4. Foundation

Foundation 是由产品设计公司 ZURB 制作的自适应前端框架。这个框架是他们自 1998 年来构建 Web 产品和服务的后果。Foundation 是最先进的响应式前端框架，并且提供了许多自定义性能。

官网：http://foundation.zurb.com/

5. Material Design for Bootstrap (MDB)

MDB 建设在 Bootstrap 之上，并提供了开箱即用的资料设计外观。它具备杰出的 CSS 库，并且与大多数风行的 JavaScript 框架（如 jQuery、Angular、React 和。Vue.js）兼容。其外围库是完全免费应用的。

官网：https://mdbootstrap.com/

UIkit
Pure CSS
Material Design Lite Framework (MDL)
Materialize
Skeleton
Bulma
Semantic UI
Milligram
Spectre.css
Base CSS Framework

常常看一些 LOL 较量直播的小伙伴，必定都晓得，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕呈现在一起的时候，弹幕会“奇妙”的躲到人物的上面，看着十分的智能。

简略的一个截图例子：

其实，这里是使用了 CSS 中的 MASK 属性实现的。

mask 简略用法介绍

之前在多篇文章都提到了 mask，比拟具体的一篇是 — 微妙的 CSS MASK，本文不对 mask 的基本概念做过多解说，向下浏览时，如果对一些 mask 的用法感到纳闷，能够再去看看。

这里只简略介绍下 mask 的根本用法：

最根本，应用 mask 的形式是借助图片，相似这样：

{
    /* Image values */
    mask: url(mask.png);                       /* 应用位图来做遮罩 */
    mask: url(masks.svg#star);                 /* 应用 SVG 图形中的形态来做遮罩 */
}

当然，应用图片的形式后文会再讲。借助图片的形式其实比拟繁琐，因为咱们首先还得筹备相应的图片素材，除了图片，mask 还能够承受一个相似 background 的参数，也就是突变。

相似如下应用办法：

{mask: linear-gradient(#000, transparent)                      /* 应用突变来做遮罩 */
}

那该具体怎么应用呢？一个非常简单的例子，上述咱们发明了一个从彩色到通明渐变色，咱们将它使用到理论中，代码相似这样：

上面这样一张图片，叠加上一个从通明到彩色的突变，

{background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

利用了 mask 之后，就会变成这样：

这个 DEMO，能够先简略理解到 mask 的根本用法。

这里失去了应用 mask 最重要论断：增加了 mask 属性的元素，其内容会与 mask 示意的突变的 transparent 的重叠局部，并且重叠局部将会变得通明。

值得注意的是，下面的突变应用的是 linear-gradient(90deg, transparent, #fff)，这里的 #fff 纯色局部其实换成任意色彩都能够，不影响成果。

CodePen Demo — 应用 MASK 的根本应用

https://codepen.io/Chokcoco/p…

应用 mask 实现人物遮罩过滤

理解了 mask 的用法后，接下来，咱们使用 mask，简略实现视频弹幕中，弹幕碰到人物，主动被暗藏过滤的例子。

首先，我简略的模仿了一个召唤师峡谷，以及一些根本的弹幕：

不便示意，这里应用了一张动态图，示意了召唤师峡谷的地图，并非真的视频，而弹幕则是一条一条的 <p> 元素，和理论状况统一。伪代码大略是这样：

<!-- 地图 -->
<div class="g-map"></div>
<!-- 包裹所有弹幕的容器 -->
<div class="g-barrage-container">
    <!-- 所有弹幕 -->
    <div class="g-barrage">6666</div>
    ...
    <div class="g-barrage">6666</div>
</div>

为了模仿理论状况，咱们再用一个 div 增加一个理论的人物，如果不做任何解决，其实就是咱们看视频关上弹幕的感触，人物被视频所遮挡：

留神，这里我增加了一个人物亚索，并且用 animation 模仿了简略的静止，在静止的过程中，人物是被弹幕给遮挡住的。

接下来，就能够请出 mask 了。

咱们利用 mask 制作一个 radial-gradient，使得人物左近为 transparent，并且依据人物静止的 animation，给 mask 的 mask-position 也增加上雷同的 animation 即可。最终能够失去这样的成果：

.g-barrage-container {
    position: absolute;
    mask: radial-gradient(circle at 100px 100px, transparent 60px, #fff 80px, #fff 100%);
    animation: mask 10s infinite alternate;
}
@keyframes mask {
    100% {mask-position: 85vw 0;}
}

实际上就是给搁置弹幕的容器，增加一个 mask 属性，把人物所在的地位标识进去，并且依据人物的静止一直的去变换这个 mask 即可。咱们把 mask 换成 background，原理一看就懂。

把 mask 替换成 background 示意图：

background 通明的中央，即 mask 中为 transparent 的局部，理论就是弹幕会被暗藏遮罩的局部，而其余红色局部，弹幕不会被暗藏，正是完满的利用了 mask 的个性。

其实这项技术和视频自身是无关的，咱们只须要依据视频计算须要屏蔽掉弹幕的地位，失去相应的 mask 参数即可。如果去掉背景和静止的人物，只保留弹幕和 mask，是这样的：

须要明确的是，应用 mask，不是将弹幕局部给遮挡住，而是利用 mask，指定弹幕容器之下，哪些局部失常展现，哪些局部通明暗藏。

最初，残缺的 Demo 你能够戳这里：

CodePen Demo — mask 实现弹幕人物遮罩过滤点击预览

https://codepen.io/Chokcoco/p…

理论生产环境中的使用

当然，下面咱们简略的还原了利用 mask 实现弹幕遮罩过滤的成果。然而理论状况比上述的场景简单的多，因为人物英雄的地位是不确定的，每一刻都在变动。所以在理论生产环境中，mask 图片的参数，其实是由后端实时对视频进行解决计算出来的，而后传给前端，前端再进行渲染。

对于使用了这项技术的直播网站，咱们能够审查元素，看到包裹弹幕的容器的 mask 属性，每时每刻都在发生变化：

返回回来的其实是一个 SVG 图片，大略长这个样子：

这样，依据视频人物的实时地位变动，一直计算新的 mask，再实时作用于弹幕容器之上，实现遮罩过滤。

最初

本文到此结束，心愿对你有帮忙 :)，本文介绍了 CSS mask 的一个理论生产环境中，十分有意义的一次实际，也表明很多新的 CSS 技术，使用切当，还是能给业务带来十分无益的帮忙的。

关于css:CSS-整块文本溢出省略特性探究布局效率提高一个层次使用-mask-实现视频弹幕人物遮罩过滤-思否技术周刊

1、小技巧！CSS 整块文本溢出省略个性探索

2、原来 CSS 的 background 还能够这么玩

3、应用这些 CSS 属性，布局效率又进步了一个档次！

4、资源：15 个优良的响应式 CSS 框架

5、应用 mask 实现视频弹幕人物遮罩过滤

Just My Socks（注册教程内含优惠码）

关于css:CSS-整块文本溢出省略特性探究布局效率提高一个层次使用-mask-实现视频弹幕人物遮罩过滤-思否技术周刊

1、小技巧！CSS 整块文本溢出省略个性探索

2、原来 CSS 的 background 还能够这么玩

3、应用这些 CSS 属性，布局效率又进步了一个档次！

4、资源：15 个优良的响应式 CSS 框架

5、应用 mask 实现视频弹幕人物遮罩过滤

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）