[分享]css写的复杂的东西

在前端开发中，CSS 是一个非常重要的部分，它可以让页面变得更加美观和易于使用。虽然 CSS 简单易学，但是在处理复杂的设计时还是需要一些技巧和知识。下面我将介绍一些 CSS 写出的复杂的东西。 .b...

在前端开发中，CSS 是一个非常重要的部分，它可以让页面变得更加美观和易于使用。虽然 CSS 简单易学，但是在处理复杂的设计时还是需要一些技巧和知识。

下面我将介绍一些 CSS 写出的复杂的东西。

  .button {
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: white;
    background-color: #28a745;
    padding: 12px 30px;
    border-radius: 6px;
    transition: all .3s ease-in-out;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
  }
  
  .button:hover {
    background-color: #218838;
    transform: translateY(-3px);
  }
  
  .button:active {
    transform: translateY(2px);
  }
  
  .button:after {
    content: "";
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2);
    top: 0;
    left: -75px;
    height: 100%;
    width: 100px;
    transform: skewX(-20deg);
    z-index: -1;
    transition: all .3s ease-in-out;
  }
  
  .button:hover:after {
    left: 100%;
    transform: skewX(20deg);
  } 

以上代码是一个优雅的按钮，其中包含了很多技术点，如：position、display、padding、border-radius、transition、overflow、text-align、cursor 等等。

同时，通过:after 伪类和 transform，按钮还增加了一个美丽的背景效果。这背景实现的技巧是使用伪类 + position + transform + transition，实现了一个斜角的背景颜色变化效果。

这个按钮看似简单，但实际上却是经过精心设计和实现的，它需要考虑各种不同情况下的样式变化和效果，通过了解这些技术点，我们可以写出更加优秀的 CSS。