乐趣区

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

jiezi

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

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

1、小技巧！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 不反对整块超长溢出打点省略

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

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

开始之前

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

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

A：原型 B：椭圆形

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

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

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

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

  1. 当 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、组合背景

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

有很多 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 属性

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

响应式 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/

  1. UIkit
  2. Pure CSS
  3. Material Design Lite Framework (MDL)
  4. Materialize
  5. Skeleton
  6. Bulma
  7. Semantic UI
  8. Milligram
  9. Spectre.css
  10. Base CSS Framework

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

常常看一些 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 技术，使用切当，还是能给业务带来十分无益的帮忙的。

退出移动版