通过 CSS3 实现特殊效果

UserGuan

已于 2022-11-18 12:33:59 修改

阅读量390

点赞数

CC 4.0 BY-SA版权

分类专栏：前端类文章标签： css3 css html

于 2022-11-18 11:52:58 首次发布

本文链接：https://blog.youkuaiyun.com/AdminGuan/article/details/127919679

前端类专栏收录该内容

52 篇文章

订阅专栏

本文通过两个实例展示了CSS在实现视觉特效方面的强大能力。首先介绍了如何利用linear-gradient属性制作文字渐变色效果，并给出了具体代码实现。其次，通过组合不同形状与模糊滤镜效果，实现了独特的图形交融视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字渐变效果

.shade {
    background: linear-gradient(to right, #c23616, #192a56, #00d2d3, yellow, #6d214f, #4cd137, #e84118);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    color: transparent;
}

<h1 class="shade">文字变成渐变色</h1>

图形交融效果

body {
  background: #000;
}
.container {
  position: relative;
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 50%;
  /* 调整对比度 */
  filter: contrast(5);
}
.black-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: #000;
  border-radius: 50%;
  filter: blur(3px);
}
.red-ball {
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 20px;
  background: red;
  border-radius: 50%;
  /* 模糊效果 */
  filter: blur(3px);
}

<div class="container">
  <div class="black-ball"></div>
  <div class="red-ball"></div>
</div>