推荐一些css写的特效

好的，以下是一些使用 CSS 实现的特效：

1. 悬停效果：使用 hover 伪类实现鼠标悬停时的动画效果，比如改变背景颜色、字体颜色、边框等。

2. 过渡效果：使用 transition 属性实现元素在状态改变时的平滑过渡效果，比如改变元素的大小、位置、透明度等。

3. 动画效果：使用 animation 属性实现元素的动画效果，比如旋转、缩放、移动等。

4. 模糊效果：使用 blur 属性实现元素的模糊效果，可以用于实现背景模糊、图片模糊等效果。

5. 阴影效果：使用 box-shadow 属性实现元素的阴影效果，可以用于实现立体感、深度感等效果。

希望这些特效能够对你有所帮助！

相关问题

写一段css登录特效

以下是一个简单的 CSS 登录特效示例：

HTML 代码：

<div class="login-form">
  <h2>Login</h2>
  <form>
    <input type="text" placeholder="Username">
    <input type="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</div>

CSS 代码：

.login-form {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background: #f4f7f8;
  border-radius: 5px;
}

.login-form h2 {
  text-align: center;
  color: #333;
  font-weight: bold;
}

.login-form form {
  display: flex;
  flex-direction: column;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  height: 40px;
  margin-bottom: 20px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #e5e5e5;
  font-size: 16px;
  color: #333;
}

.login-form button[type="submit"] {
  height: 40px;
  border: none;
  border-radius: 5px;
  background: #007bff;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.login-form button[type="submit"]:hover {
  background: #0069d9;
}

这个特效使用了简单的背景和过渡效果来让登录表单看起来更加吸引人。同时，输入框和按钮也被美化，以增加用户的使用体验。

CSS写一个网页烟花特效

这里是一个使用 CSS 实现烟花特效的例子：

@keyframes fireworks {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px) scale(0);
    opacity: 0;
  }
}

.firework {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}

.firework.blue {
  background-color: blue;
}

.firework.yellow {
  background-color: yellow;
}

.firework.green {
  background-color: green;
}

.firework.white {
  background-color: white;
}

.firework {
  animation: fireworks 2s ease-in-out;
}

.firework.delayed {
  animation-delay: 0.5s;
}

.firework.longer {
  animation-duration: 3s;
}

您可以通过更改背景颜色、动画持续时间、动画延迟时间等属性来调整烟花的外观。你还可以使用 JavaScript 来控制烟花的发射。