css展示的效果如何实现

CSS 是前端网页开发中非常重要的一部分，它可以用来美化我们的页面，让页面更加美观。下面我们来介绍一下 CSS 可以实现的一些展示效果。

/* 暗黑主题 */
body {
  background-color: #333;
  color: #fff;
}

/* 文字阴影 */
h1 {
  text-shadow: 3px 3px #000;
}

/* 渐变色背景 */
#gradient {
  background: linear-gradient(to right,#2196f3,#f44336);
}

/* 边框动画 */
.Box {
  border: 2px solid #2196f3;
  border-radius: 5px;
  Box-shadow: 0 0 5px #2196f3;
  transition: all 0.3s ease;
}

.Box:hover {
  border: 2px solid #f44336;
  Box-shadow: 0 0 5px #f44336;
}

/* 浮动效果 */
.img-Box {
  float: left;
  margin: 10px;
  Box-shadow: 0 0 10px #000;
  transition: all 0.3s ease;
}

.img-Box:hover {
  transform: rotate(360deg);
}

/* 文字滑动 */
.slider {
  overflow: hidden;
  white-space: Nowrap;
  animation: slide 5s infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

可以看到，利用 CSS，我们可以轻松实现暗黑主题、文字阴影、渐变色背景、边框动画、浮动效果、文字滑动等多种展示效果，让页面更加生动、优美。