css中有趣的案例

在我们平时的网页中，我们都知道 CSS 是用来美化网页的语言，但是你有没有想过 CSS 只有这些功能吗？实际上， CSS 还有很多有趣的应用。以下是一些 CSS 中有趣的案例。

<p>1. 过渡动画效果</p>
.hover-effect {
  background-color: pink;
  transition: background-color 0.5s ease;
}
.hover-effect:hover {
  background-color: purple;
} 

使用上述 CSS 代码，你可以在:hover 时发现一个有趣的动画效果。当鼠标指针移到上面时，背景色会从粉色过渡到紫色。在这里，我们使用了 CSS 中的过渡动画效果来实现这样的效果。

<p>2. 跑马灯</p>
.marquee {
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
} 

使用上述 CSS 代码，你可以在网页上添加一个跑马灯效果。实现这个效果的方法是通过 CSS 中的动画属性和关键帧。

<p>3. 制作图片模糊效果</p>
.blur {
  filter: blur(5px);
} 

使用上述 CSS 代码，你可以给图片添加一个模糊效果。这个效果可以让图片看起来更柔和，更加舒适。

<p>4. 悬浮效果</p>
.hover {
  position: relative;
}
.hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity .3s ease-in-out;
}
.hover:hover::before {
  opacity: 1;
} 

使用上述 CSS 代码，你可以在悬浮时添加一个半透明的背景色。这将给用户提供一个更好的体验，因为它让它们感觉更加亲近网站。

综上所述，这些有趣的 CSS 应用可以让我们的网页更加生动有趣，更加吸引用户的注意。如果你还没有在你的网站上使用它们，现在就开始吧！