css中文本阴影特效

文字颜色渐变

css中文本阴影特效_第1张图片

.text-clip{
  color:transparent;
  font-size: 40px;
  font-weight: bold;
  background: linear-gradient(45deg, rgba(0,173,181,1) 0%, rgba(0,173,181,.4) 100%);
  -webkit-background-clip: text;
}

文字模糊

css中文本阴影特效_第2张图片

.text-blurry{
  text-align: center;
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

空心文字

css中文本阴影特效_第3张图片

.hollow-text {
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882);
}

文字外发光

1e6e4280413fda90730c1e7f538a51dc.png

.glow-text{
  line-height:60px;
  background: #00adb5;
  color:#fff;
  text-align: center;
  text-shadow: 0 0 0.1em, 0 0 0.3em;
}

文字阴影

47674f429eba236f152d628ce44c4e42.png

.text-shadow{
  color:#00adb5;
  text-shadow: 1px 1px rgba(0,173,181,.2882),
  2px 2px rgba(0,173,181,.2882),
  3px 3px rgba(0,173,181,.2882),
  4px 4px rgba(0,173,181,.2882);
}

纯CSS3实现悬停时出现对角线耀光效果的按钮

2023-08-09

css中文本阴影特效_第4张图片

谈谈怎么持续努力

2023-08-08

css中文本阴影特效_第5张图片

纯CSS实现的一个对角线填充颜色的按钮悬停动效

2023-08-07

css中文本阴影特效_第6张图片

使用CSS3 box-shadow实现的7个按钮悬停动画特效

2023-08-06

css中文本阴影特效_第7张图片

CSS3标题文本后的横线

2023-08-05

css中文本阴影特效_第8张图片

纯CSS3文章边角悬停气泡化填充动效

2023-08-04

css中文本阴影特效_第9张图片

css中文本阴影特效_第10张图片

(能绘画,能问答)

css中文本阴影特效_第11张图片

你可能感兴趣的:(css,前端)