[分享]css做酷炫效果常用

如果你想要给网站添加一些酷炫的效果，那么 CSS 是必不可少的一部分。在这篇文章中，我们会介绍一些常用的 CSS 技巧，帮助你创造出令人惊叹的效果。以下是一些你可能会用到的技术。/ CSS3 过渡效果...

如果你想要给网站添加一些酷炫的效果，那么 CSS 是必不可少的一部分。在这篇文章中，我们会介绍一些常用的 CSS 技巧，帮助你创造出令人惊叹的效果。以下是一些你可能会用到的技术。

/* CSS3 过渡效果 */
.box {
  transition: all 0.3s ease;
}

.box:hover {
  transform: scale(1.1);
}

/* CSS3 动画效果 */
@keyframes slidein {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }
}

.box {
  animation: slidein 1s ease;
}

/* CSS3 渐变效果 */
.box {
  background: linear-gradient(to right, #ff6f00, #ffedbc);
}

/* 线性渐变效果 */
.box {
  background: linear-gradient(to right, #ff6f00, #ffedbc);
}

/* 径向渐变效果 */
.box {
  background: radial-gradient(circle, #ff6f00, #ffedbc);
}

/* 文字阴影效果 */
.box {
  text-shadow: 2px 2px #ff6f00;
}

/* 盒子阴影效果 */
.box {
  box-shadow: 2px 2px #ff6f00;
}

/* CSS3 滤镜效果 */
.box {
  filter: grayscale(100%);
}

/* CSS3 褪色效果 */
.box {
  opacity: 0.5;
} 

这些 CSS 技巧只是冰山一角，你可以参考一些优秀的 CSS 教程或者在 Stack Overflow 中寻找帮助。使用这些技巧配合你的创意，创造出独一无二的效果，让你的网站更具吸引力。