创意填充文本悬停效果

效果展示

创意填充文本悬停效果1.png 创意填充文本悬停效果2.png

CSS 知识点

• text-shadow 属性实现 3D 文字
• clip-path 属性的运用

实现页面基础结构布局

<div class="container">
  <!-- 使用多个h2标签来实现不同颜色的3D文字 -->
  <h2>Text</h2>
  <h2>Text</h2>
  <h2>Text</h2>
  <h2>Text</h2>
</div>

实现 3D 文字

.container h2 {
  position: absolute;
  font-size: 12em;
  color: #444;
  line-height: 1em;
  text-shadow: -2px 2px 0 #222, -4px 4px 0 #222, -6px 6px 0 #222, -8px 8px 0
      #222, -10px 10px 0 #222, -10px 10px 0 #222, -12px 12px 0 #222, -14px 14px
      0 #222, -16px 16px 0 #222, -18px 18px 20px #000, -18px 18px 30px #000, -18px
      18px 50px #000, -18px 18px 150px #000;
}

实现文字上方其他颜色的圆圈

文字上传的圆圈可以采用clip-path属性进行实现。以下代码只是展示一个颜色圆圈的实现。

.container h2:nth-child(2) {
  color: #03a9f4;
  text-shadow: -2px 2px 0 #0375a9, -4px 4px 0 #0375a9, -6px 6px 0 #0375a9, -8px
      8px 0 #0375a9, -10px 10px 0 #0375a9, -10px 10px 0 #0375a9,
    -12px 12px 0 #0375a9, -14px 14px 0 #0375a9, -16px 16px 0 #0375a9, -18px 18px
      20px #000, -18px 18px 30px #000, -18px 18px 50px #000,
    -18px 18px 150px #000;
  clip-path: circle(20% at 50% 100%);
  transition: clip-path 2.5s;
}

实现圆圈扩散的效果

.container h2:hover:nth-child(2) {
  clip-path: circle(50% at 50% 100%);
  z-index: 100;
}

完整代码下载

完整代码下载