CSS效果集合

目录

1、毛玻璃特效

 2、文本设置为全大写或者全小写

3、实现首字下沉

4、实现正方形

5、图片文字环绕

6、多个元素相同样式

7、实现平滑移动

8、悬停放大

9、背景混合模式

10、自定义光标

---

1、毛玻璃特效

效果：

代码：

.login {
  backdrop-filter: blur(5px);
}

 2、文本设置为全大写或者全小写

/* 大写 */
.upper {
  text-transform: uppercase;
}

/* 小写 */
.lower {
  text-transform: lowercase;
}

3、实现首字下沉

p.texts:first-letter {
  font-size: 200%;
  color: #8A2BE2;
}

4、实现正方形

.square {
  background: #8A2BE2;
  width: 25rem;
  aspect-ratio: 1/1;
}

5、图片文字环绕

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

6、多个元素相同样式

//老的写法
.parent div,
.parent .title,
.parent #article {
  color: red;
}
//新的写法

.parent :where(div, .title, #article) {
  color: red;
}

7、实现平滑移动

html {
  scroll-behavior: smooth;
}

8、悬停放大

img:hover {
  transform: scale(1.5);
}

9、背景混合模式

效果：

 

.blend-1 {
  background-image: url(https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg);
  width: 100vw;
  height: 500px;
  background-size: cover;
} 

.blend-2 {
  background-image: url(https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg);
  width: 100vw;
  height: 500px;
  background-color: #20126f;
  background-size: cover;
  background-blend-mode: overlay;
}

10、自定义光标

body{  
   cursor: url("path-to-image.png"), auto;
}