CSS文字特效-裂开吧

沉下心，先过知识点，然后看好玩的

css文字特效

文本阴影 text-shadow

四个参数分别对应水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

盒子阴影 box-shadow

1、可以在 ::before 和 ::after 两个伪元素中添加阴影效果

2、水平偏移量 垂直偏移量 模糊距离 阴影大小 颜色 向内/向外（默认向外)

文本溢出 text-overflow

告诉容器应向用户如何显示溢出内容，需要搭配white-space: nowrap使用

换行 word-wrap

允许对长的不可分割的单词进行分割并换行到下一行。

今天例子要使用的东西，

data-* clip-path shape rotate() ::before(:before) ::after(:after)

HTML data-* 属性

1、data-* 属性用于存储页面或应用程序的私有自定义数据。

2、data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

3、存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

4、HTMLElement.dataset属性可以访问到它们

5、每一个自定义属性都是一个可读可写的string

6、css-access,可以显示自定义属性的内容

7、css-access,还可以使用属性选择器对样式进行控制

clip-path

创建一个只有元素的部分区域可以显示的剪切区域

语法

clip-path 属性是下面的属性之一或者其组合

clip-source 用URL表示剪切元素的路径

inset(), circle(), ellipse(), polygon() 一个

方法. 这种形状将会利用指定的来定位和固定基本形状。如果没有geometry box（几何盒模型）特别指出的话，border-box将会是默认的盒模型。

geometry-box 如果同

一起声明，它将为基本形状提供相应的参考盒子。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被border-radius定义的剪切路径）。几何体盒子将会有以下的值： fill-box 利用对象边界框作为引用框。 stroke-box 使用笔触边界框作为引用框 view-box 使用最近的SVG视口作为引用框。如果viewBox 属性被指定来为元素创建SVG视口，引用框将会被定位在坐标系的原点，引用框位于由view-box属性建立的坐标系的原点，引用框的尺寸用来设置viewbox属性的宽高值。 margin-box 使用 margin box 作为引用框 border-box 使用 border box 作为引用框. padding-box 使用 padding box 作为引用框. content-box 使用 content box 作为引用框

none 这里没有创建的剪切路径。

basic-shape

CSS数据类型表示剪辑路径中使用的形状或属性外部的形状。

rotate()

CSS函数定义了一个变换，它在二维平面上围绕固定点旋转一个元素，而不变形。是的一个属性

rotate(a) a是“角度”，表示旋转的角度。正角表示顺时针旋转，负角为逆时针旋转。

::before (:before)

:before 选择器在被选元素的内容前面插入内容。请使用 content 属性来指定要插入的内容。

::after(:after)

:after 选择器在被选元素的内容后面插入内容。请使用 content 属性来指定要插入的内容。

重点东西说完了，然后我们好玩的东西

HTML

CSS

效果图

没个人都是带着偏见看世界的