CSS样式|CSS效果集合 css3|前端|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、自定义光标