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

效果图

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180621G072SS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券