那些惊艳一时的 CSS 属性

置顶 已于 2022-12-02 14:47:48 修改
阅读量3.7k 收藏 55
点赞数 6
文章标签： css javascript css3
于 2022-11-30 18:29:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HelloWorldLJY/article/details/128117932
版权

1.position: sticky

在这里插入图片描述

不知道大家平时业务开发中有没有碰到像上图一样的吸顶的需求：标题在滚动的时候，会一直贴着最顶上。
这种场景实际上很多：比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。如果让大家自己动手做的话，是不是会用 js 结合 css 来实现呢？以前确实是这样的，直到后来 position 属性新增了一个属性值 sticky ，前端程序员才迎来了小春天。

// css 部分
.container {
    background-color: oldlace;
    height: 200px;
    width: 140px;
    overflow: auto;
  }
  .container div {
    height: 20px;
    background-color: aqua;
    border: 1px solid;
  }
  .container .header {
    position: sticky;
    top: 0;
    background-color: rgb(187, 153, 153);
}

// html 部分
<div class="container">
  <div class="header">Header</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

就这么简单？对，就这么简单，但是小伙伴们使用的时候要注意兼容性

2. :empty 选择器

在这里插入图片描述
平时开发的时候数据都是通过请求接口获取的，也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示，让用户知道当前不是出 bug 了，而是确实没有数据。
一般的做法是我们人为的判断当前数据返回列表的长度是否为 0，如果为 0 则显示一个 “暂无数据” 给用户，反之则隐藏该提示。写过 Vue 的小伙伴是不是经常这么做：

<div>
    <template v-if="datas.length">
        <div v-for="data in datas"></div>
    </template>
    <template v-else>
        <div>暂无数据</div>
    </template>
</div>

但是有了 :empty 这个选择器后，你大可以把这个活交给 CSS 来干。

.container {
    height: 400px;
    width: 600px;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container:empty::after {
    content: "暂无数据";
}

通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示。是不是方便很多呢？

3. gap

小伙伴们日常开发中，都有用过 padding 和 margin 吧，margin 一般用做边距，让两个元素隔开一点距离，但是对于一些场景下，我们很难通过计算得到一个除的尽的值，比如 100px 我要让 3 个元素等分，且每个元素隔开 10px，这就很尴尬了。
没关系！我们可以用 gap 属性，gap 属性它适用于 Grid 布局、Flex 布局以及多列布局，并不一定只是 Grid 布局中可以使用。
比如我们要让每个元素之间隔开 20px， 那么使用 gap 我们可以这样：

display: flex | grid；
gap: 20px;

4. background-clip: text

这个属性可能小伙伴们用的不多，有什么用呢？简单来说就是可以做一个带背景的文字效果：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

图 1 + 图 2 = 图 3。是不是很惊艳呢？大家平时 background-clip 是不是都用来做一些裁切效果？in知道它还有个属性值是 text 吗？background-clip: text 用来做带背景的文字效果，相信大家平时浏览一些网站的时候都会看到类似的实现，实际上通过 CSS 我们也能做到这种效果，可不要傻傻的以为都是用制图工具做的。

<p>Lorem ......</p>

p {
  color: transparent;
  background: url(https://media.giphy.com/media/Ju7l5y9osyymQ/giphy.gif) center/cover;
  background-clip: text;
}

5. user-select

很多人不知道这个属性是什么意思。大家看看下图：
在这里插入图片描述
网页和 APP 有个不同点是，网页上的字是可以通过光标选中的，而 APP 的不行。
有的小伙伴可能会疑惑：那我网页上也用不着这个属性啊？
非也非也，我们知道现在很多新的技术产生，可以在 APP 上嵌套 webview 或者是网页，比如 Electron 做的 桌面端应用 ，大家没见过哪个桌面端应用是可以光标选中的吧？
而 user-select 属性可以 禁用光标选中 ，让网页看着和移动端一样。

6. :invalid 伪类

:invalid 表示任意内容未通过验证的 input 或其他 form 元素。什么意思呢？举个例子。
这是一个表单。

<form>
  <label for="url_input">Enter a URL:</label>
  <input type="url" id="url_input" />
  <br />
  <br />
  <label for="email_input">Enter an email address:</label>
  <input type="email" id="email_input" required/>
</form>

我们的需求是让 input 当值有效时，元素颜色为绿色，无效时为红色。

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #C00000;
}

有了 :invalid 属性后，我们就可以不用 JS 也能实现校验提示的效果了。

7. :focus-within 伪类

:focus-within 表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上。啥意思呢？
话不多说，先看图：
在这里插入图片描述

// CSS
form {
    border: 1px solid;
    width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
form:focus-within {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
    background-color: beige;
}

// HTML
<form>
  <input type="text" id="ipt" placeholder="请输入..." />
</form>

8. mix-blend-mode:difference

mix-blend-mode: difference，意为差值模式
该混合模式会查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。

与白色混合将使底色反相；与黑色混合则不产生变化。
通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。

例子1
在这里插入图片描述

//css
.mode {
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode:difference;
}
  .dark {
    position: relative;
    left: 6px;
    height: 24px;
    width: 24px;
    background-color: grey;
    border-radius: 50%;
}
.light {
    mix-blend-mode:difference;
    position: relative;
    left: -6px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 4px solid grey;
}
//html
<div class="mode">
	<div class="dark"></div>
	<div class="light"></div>
</div>

例子2
在这里插入图片描述

<div class="main"></div>

.main{
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
    position: relative;
    
    &::before{
        content:'LOADING';
        position: absolute;
        font-size: 50px;
        width: 100%;
        height: 100%;
        top: 40%;
        left: 20%;
        color: #fff;
        mix-blend-mode: difference;
        animation: move 3s infinite linear alternate;
    }
} 
@keyframes move {
    0% {
        transform: translateX(20%);
    }
    100% {
        transform: translateX(-20%);
    }

9.counter

css也可以像js进行计算，当我们需要设置序号或者想知道某种情况出现的次数时，我们可以用一下属性

//counter-increment: record; 		/* 为计数器每次自增 1（默认） */
//counter-increment: record 2; 	/* 为计数器每次自增 2 */
//html
<body>
	<h3>lalala</h3>
  	<h3>lalala</h3>
  	<h3>lalala</h3>
</body>

//css
body{
	counter-reset: first;	/* 创建一个计数器first*/
}
h3:before {
  	content: counter(first)": " ;
}
h3 {
  	counter-increment: first 2;		/* 为计数器first每次增加2 */
}
//会得到结果
//2：lala
//4：lala
//6：lala

10.clip-path

该属性用于截取元素的部分用于显示

polygon

  • 值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。
  • 左上角为原点，右下角是(100%,100%)的点。
//css
body {
  background-color: #000;
}
 
.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}
 
.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}
 
.polygon1 {
  clip-path: polygon(50% 0px, 100% 100%, 0px 100%)
}
 
.polygon2 {
  clip-path: polygon(0px 50%, 50% 0, 100% 50%, 50% 100%)
}
 
.polygon3 {
  clip-path: polygon(0% 60%, 20% 0%, 60% 0%, 40% 60%)
}

//html
<div class="fa">
  <p>polygon</p>
  <p>值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。</p>
  <p>左上角为原点，右下角是(100%,100%)的点。</p>
  <div class="polygon1"></div>
  <div class="polygon2"></div>
  <div class="polygon3"></div>
</div>

在这里插入图片描述
circle

  • 值为一个坐标点和半径组成。
  • 左上角为原点，右下角是(100%,100%)的点。
  • 定义半径的时候可以用at关键字来定义坐标。
//css
body {
  background-color: #000;
}
 
.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}
 
.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}
 
.circle1 {
  clip-path: circle(50% at 50% 50%)
}
 
.circle2 {
  clip-path: circle(70% at 50% 50%)
}
 
.circle3 {
  clip-path: circle(30% at 10% 10%)
}

//html
<div class="fa">
  <p>circle</p>
  <p>值为一个坐标点和半径组成。</p>
  <p>左上角为原点，右下角是(100%,100%)的点。</p>
  <p>定义半径的时候可以用at关键字来定义坐标。</p>
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
</div>

在这里插入图片描述
ellipse

  • 值为椭圆的x轴半径，y轴半径，定位椭圆的坐标三部分组成。
  • 左上角为原点，右下角是(100%,100%)的点。
  • at关键字将半径和坐标分开。
//css
body {
  background-color: #000;
}
 
.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}
 
.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}
 
.ellipse1 {
  clip-path: ellipse(30% 20% at 50% 50%)
}
 
.ellipse2 {
  clip-path: ellipse(20% 30% at 50% 50%)
}
 
.ellipse3 {
  clip-path: ellipse(60% 10% at 10% 10%)
}
//html
<div class="fa">
  <p>ellipse</p>
  <p>值为椭圆的x轴半径，y轴半径，定位椭圆的坐标三部分组成。</p>
  <p>左上角为原点，右下角是(100%,100%)的点。</p>
  <p>at关键字将半径和坐标分开</p>
  <div class="ellipse1"></div>
  <div class="ellipse2"></div>
  <div class="ellipse3"></div>
</div>

在这里插入图片描述
inset

  • 值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)
  • round前面的数值，表示的是距离，如果第一个值为25%，则表示图像在上面从25%开始绘制。
//css
body {
  background-color: #000;
}
 
.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}
 
.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}
 
.inset1 {
  clip-path: inset(25% 0% 25% 0% round 0% 25% 0% 25%)
}
 
.inset2 {
  clip-path: inset(0% 25% 25% 0% round 25% 25% 25% 0%)
}
 
.inset3 {
  clip-path: inset(25% 25% 0% 0% round 0% 25% 0% 25%)
}
//html
<div class="fa">
  <p>inset</p>
  <p>值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)</p>
  <p>round前面的数值，表示的是距离，如果第一个值为25%，则表示图像在上面从25%开始绘制</p>
  <div class="inset1"></div>
  <div class="inset2"></div>
  <div class="inset3"></div>
</div>

在这里插入图片描述
clip-path生成器：http://tools.jb51.net/code/css3path

11.mask(遮罩)

核心：所谓遮罩，就是原始图片只显示遮罩图片非透明的部分。（一定要理解）
background代表元素图片，mask代表遮罩图片
例子1

在这里插入图片描述

在这里插入图片描述

.main{
    width: 500px;
    height:500px;
    background: url('./background.png') no-repeat;
    background-size: 500px 500px;
    -webkit-mask-image: url('./mask.png');
    mask-image: url('./mask.png');
    -webkit-mask-size: 500px 500px;
    //mask-image可能无法使用，我们用其他的替换一下（用径向渐变画一个直径为250px的圆）
    //-webkit-mask: radial-gradient(transparent 250px, #000 250px) no-repeat;
    //mask: radial-gradient(transparent 250px, #000 250px) no-repeat;
}

第一张图片为background（原始图片）
第二章图片代表mask（遮罩图片）
所以原始图片只显示大虾这张图片的非透明（也就是大虾本身）部分
在这里插入图片描述

例子2（做渐变）

.main{
    width: 500px;
    height:500px;
    background: url('./background.png') no-repeat;
    background-size: 500px 500px;
    -webkit-mask: linear-gradient(90deg, #fff,transparent);
    mask: linear-gradient(90deg, #fff,transparent);
    -webkit-mask-size: 500px 500px;
}

在这里插入图片描述
例子3（多张图片）

.main{
    width: 500px;
    height:500px;
    background: url('./background.png') no-repeat;
    background-size: 500px 500px;
    position: relative;
    &::before{
        position: absolute;
        content: '';
        width: 500px;
        height: 500px;
        background: url('./overBackground.png');
        background-size: 500px 500px;
        -webkit-mask: linear-gradient(45deg, #000 50%, transparent 50%);
        mask: linear-gradient(45deg, #000 50%, transparent 50%);
        -webkit-mask-size: 500px 500px;
    }
}

在这里插入图片描述
弹幕也是这种原理
可以分为三个图层
1.主播的电脑桌面（游戏画面和主播的实际人物）
2.弹幕
3,主播实际人物的遮罩层（人物部分为透明，其他部分为非透明）
以上述例子，弹幕为background，主播实际人物遮罩层为mask

例子4

.main{
    width: 500px;
    height:500px;
    background: url('./background.png') no-repeat;
    background-size: 500px 500px;
    position: relative;
}
.main:hover::before {
  position: absolute;
  content: "";
  width: 500px;
  height: 500px;
  background: url("./overBackground.png");
  background-size: 500px 500px;
  animation: maskRotate 2s ease-in-out;
}
//@for是sass的方法，没有安装sass自行修改
@keyframes maskRotate {
  @for $i from 0 through 100 {
    #{$i}% {
 	mask: linear-gradient(
        45deg,
         #000 #{$i + "%"},
         transparent #{$i + 5 + "%"}
       );
    -webkit-mask: linear-gradient(
        45deg,
        #000 #{$i + "%"},
        transparent #{$i + 5 + "%"}
      );
    }
  }
}

在这里插入图片描述

引用于：
https://juejin.cn/post/7155780555554947102
https://www.jb51.net/css/641182.html
https://blog.csdn.net/weixin_41897680/article/details/122688152

lxsssss
关注
细数那些惊艳一时的 CSS 属性
Allen-Ye博客
03-13 1097
细数那些惊艳一时的 CSS 属性
css3剪贴路径（Clip-path）在线生成器
weixin_41639609的博客
03-26 2466
【代码】css3剪贴路径（Clip-path）在线生成器。
css3在线生成不规则图形(css3 clip-path)
小冯的博客
10-16 3387
程序员要学会如何高效搬砖 生成器链接：http://tools.jb51.net/static/api/css3path/index.html
前端 CSS 经典：clip-path 裁剪
最新发布
weixin_64684095的博客
06-21 491
前言：clip-path 可以把一个元素裁剪成任意你想要的形状。，通过改变数值，还可以做出有趣的动画。
细数那些惊艳一时的 css 属性
09-17
以下是几个令人惊艳的CSS属性： 1. 渐变（gradient）：通过使用渐变属性，能够创建出平滑的颜色变化效果。使用渐变属性可以在背景、边框或文字中使用，可以使用线性渐变或径向渐变，让元素看起来更加炫目。 2. ...
15个拥有惊艳效果的HTML5和CSS3体验
03-04
3. MonsterCursor可能是一个通过CSS3自定义鼠标指针的示例，例如使用CSS的cursor属性。 4. 3DHome和DigitalClock可能分别利用了CSS3的transform和animation属性来创建3D效果和动态时钟效果。 5. iOSIcons和...
又一个CSS3翻书动画效果.rar
07-10
然后，通过CSS3的`transition`属性设置翻页时的平滑过渡，配合`transform-origin`控制旋转起点，使翻页更自然。此外，可以使用伪元素如`:before`和`:after`来添加书脊和阴影效果，增加立体感。 然而，描述中提到的...
html5 figcaption和css3制作8种惊艳的图片标题hover效果
12-13
`transition`属性则控制了元素在不同状态间转换时的动画效果，如改变颜色、大小或位置时的平滑过渡。 结合这两种技术，开发者可以实现丰富的交互式标题效果。例如： 1. **3D翻转**: 当鼠标悬停在图片上时，标题...
40个惊艳的CSS3动画效果展示
在Web开发领域，CSS3是一种强大的样式表语言，它扩展了CSS2的功能，引入了许多新的特性和动画效果。这些特性使得开发者能够创建出更为动态和交互式的网页，而无需依赖JavaScript或者其他重型库。以下是一些文章中...
CSS clip-path 生成器
lio-zero 的博客
10-24 1332
有了 clip-path 属性，我们可以在 CSS 中通过将元素剪裁为基本形状来创建复杂形状，可以是简单的圆、漂亮的多边形，甚至是 SVG 源。CSS clip-path maker Clippy 是一种可视化工具，可帮助您在浏览器中创建和自定义剪辑路径。 clip-path 首先，从 Clippy 的菜单中选择一个形状和演示背景。然后，您可以拖动形状的点来创建您喜欢的任何形状。颜色编码...
CSS clip-path生成网站
rice__pudding的博客
01-25 1092
1.定义：使用裁剪方式创建元素的可显示区域，区域内显示，区域外隐藏 2.可参照：clip-path生成器
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具，可以直接生成SVG代码以及配合Mask制作蒙板。...
weixin_30492047的博客
04-09 821
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具，可以直接生成SVG代码以及配合Mask制作蒙板。 CLIP PATH (MASK) GENERATOR 彩蛋爆料直击现场 CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具，可以直接生成SVG代码以及配合Mask制作蒙板。 转载于...
用clip-path实现一个水波纹的字体
苏苏就是小苏苏的博客
10-14 491
1.实现效果 2.实现步骤 2.1.写一个h2标签 <h2 content="苏苏">苏苏</h2> 2.3.设置字体镂空 body { margin: 0; padding: 0; display: flex; height: 100vh; justify-content: center; align-items: center; background-color: #222; min-width: 1200px; } h2 { color: #fff;
clip-path图片裁剪
Mr_linjw的专栏
10-25 340
语法：clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;stroke-box 使用笔触边界框（stroke bounding box）作为引用框。view-box 使用最近的 SVG 视口（viewport）作为引用框。阅读关于 initial。fill-box 使用对象边界框作为引用框。
推荐开源项目：Clip-path 转换器
gitblog_00035的博客
06-04 374
推荐开源项目：Clip-path 转换器 去发现同类优质开源项目:https://gitcode.com/ 1、项目介绍 在前端设计中，CSS 的 clip-path 属性能帮助我们实现惊人的形状裁剪效果，但将 SVG 路径应用到 clip-path 并非易事，尤其是当路径坐标为绝对值时。为此，我们带来了一个解决之道——Clip-path Converter。这个工具能够将SVG路径的绝对坐标转换...
CSS 高级属性之 clip-path 详解
青颜的天空的博客
03-08 1789
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/clip-path
CSS——通过裁剪获得自己想要的任意图形（clip-path属性）
qq_43201350的博客
12-09 867
1、用法：clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 **2、参数说明: ** 注意：clip-path 统一是 左上角为原点，右下角是(100%,100%)的点 圆: clip-path: circle(50% at 50% 50%) 参数分别表示 圆心的x轴和y轴坐标，以及圆的半径 椭圆: clip-path: ellipse(30% 20% at 50% 50%) 参数分别表示 椭圆的x轴半径和y轴半径，椭圆位置的x和y坐标． 多边形:
CSS使用clip-path实现元素动画
03-30 863
在日常开发当中，如果想要开发多边形，一般都需要多个盒子或者伪元素的帮助，有没有一直办法能只使用一个盒子实现呢？有的：css裁剪目录clip-path到底是什么？clip-path属性示例图：初始化样式代码示例：CSS3剪贴路径（Clip-path）在线生成器工具 - 代码工具 - 脚本之家在线工具clip-path - CSS：层叠样式表 | MDN。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值