CSS 技巧

评判一个网页的美观程度，首要的当然是看它的 CSS 样式写的如何。

日本某宅写了一个非常厨二的页面——臆病な魔女，可以说是把 CSS 动画玩得非常 6 了，看得笔者顿时燃起了学好 CSS 的欲望。

如果想 CSS 玩的溜，除了熟悉基本的知识以外，掌握大量技巧也是必不可少的。

形状

扩张式矩形

目的：创建一个矩形，鼠标悬浮时扩张一定的大小

预览

<div class="expanding-box"></div>
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.expanding-box {
  position: relative;
  width: 15em;
  height: 10em;

  &::after {
    position: absolute;
    content: "";
    top: -1em;
    right: -1em;
    bottom: -3em;
    left: -1em;
    background: black;
    --path: inset(2rem 0 2rem 2rem round 10px);
    clip-path: var(--path);
    transition: clip-path 0.3s;
  }

  &:hover::after {
    --path: inset(0 round 10px);
  }
}

首先利用伪元素::after生成一个矩形

利用clip-path的inset来裁切矩形（顺序是上右下左圆角）

鼠标悬浮时去除裁切效果即可

字体排印

分割符

目的：实现分隔符效果

预览

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Archive</a></li>
  <li><a href="#">About</a></li>
</ul>
ul {
  display: flex;
  font-weight: bold;
  list-style-type: none;

  li {
    &:not(:last-child) {
      margin-right: 5px;

      &::after {
        content: "|";
        margin-left: 5px;
      }
    }
  }
}

添加伪元素::after，内容content: "|"，设置间距

再用:not(:last-child)去除伪元素的最后一个子元素即可

用户体验

提示用角标

目的：在按钮右上角创建一个提示用的角标

预览

<button class="badge" count="7">消息</button>
body {
  display: flex;
  justify-content: center;
}

button {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  font-size: 24px;
}

.badge::before {
  content: attr(count);
  position: absolute;
  right: 10px;
  top: -8px;
  background: tan;
  padding: 0 8px;
  border-radius: 12px;
  transform: translate(50%, 0);
}

伪元素的content可通过attr()来获取标签的某一属性值

类似的提示框也可以配合过渡动画来实现：预览

伸缩式按钮

目的：实现伸缩式按钮（鼠标悬浮按钮则展开，移开按钮则收缩）

预览

<a href="#" class="sliding-button">
  <span>下载</span>
  <span>720p</span>
</a>
<a href="#" class="sliding-button">
  <span>下载</span>
  <span>1080p</span>
</a>
$tianyi-blue: #66ccff;

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.sliding-button {
  background: $tianyi-blue url(https://i.loli.net/2019/09/04/JULm1Agr5Gzy7iK.png)
    no-repeat -30px center;
  overflow: hidden;
  transition: padding 0.2s ease, background-position 0.2s ease,
    transform 0.5s ease;

  border: 1px solid $tianyi-blue;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 6px 16px 6px 16px;
  font-size: 18px;
  font-weight: bold;
  line-height: 27px;

  &:nth-child(1) {
    margin-right: 1em;
  }

  span:nth-child(1) {
    position: absolute;
    left: -80px;
  }

  &:hover {
    padding-left: 69px;
    background-position: 5px center;
    transform: scale(1, 1);

    span:nth-child(1) {
      left: 30px;
    }
  }
}

给“下载”设置负的left用于将其移除视界范围

鼠标悬浮时设置padding-left使按钮给“下载”留出空间

left: 30px;和transform: scale(1, 1);把“下载”拉回按钮中（这个很 hack）

最后设定过渡动画即可看到流畅的过渡效果了

结构与布局

圣杯布局

目的：实现圣杯布局（左中右三列，左右两列定宽，中间列自适应宽度）

预览

<div class="g-container">
  <div class="g-left">left</div>
  <div class="g-middle">middle</div>
  <div class="g-right">right</div>
</div>
.g-container {
  display: flex;
  height: 100vh;
  min-width: 400px;

  & > div {
    text-align: center;
    color: #fff;
    line-height: 100vh;
    font-size: 3vw;
  }

  .g-left {
    order: 1;
    flex: 200px 0 0;
    background: cyan;
  }

  .g-middle {
    order: 2;
    flex: auto 1 0;
    background: purple;
  }

  .g-right {
    order: 3;
    flex: 200px 0 0;
    background: red;
  }
}

左右列的flex-grow设为200px，表示它们各占200px空间

中间列的flex-grow设为auto，flex-shrink 设为 1，表明是自适应宽度

过渡与动画

动态侧边栏

目的：创建一个导航用的侧边栏，里面包含一个列表，用户鼠标浮动到链接上时会显示过渡动画

预览

<body>
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">resume</a></li>
      <li><a href="#">tags</a></li>
      <li><a href="#">categories</a></li>
      <li><a href="#">archives</a></li>
      <li><a href="#">search</a></li>
    </ul>
  </nav>
</body>
nav {
  position: relative;
  background: hsl(60, 100%, 65%);
  width: 218px;
  padding-top: 5px;
}

ul {
  list-style: none;
  width: 197px;
  margin: 0 auto;
  padding: 0;
  vertical-align: baseline;
  li {
    margin: 2.5px 0;
    a {
      display: inline-block;
      position: relative;
      padding: 8px 0;
      padding-left: 20px;
      color: black;
      font-weight: 800;
      font-size: 22px;
      letter-spacing: 0.075em;
      text-decoration: none;
      text-transform: uppercase;
      &::before {
        content: "";
        position: absolute;
        opacity: 0;
        background: url("https://test.demo-1s.com/images/2019/06/24/d31DXx0KYav6cZkG.png")
          left center no-repeat;
        top: 0;
        left: 2px;
        width: 16px;
        height: 100%;
        transform: translateX(10px);
        transition: 0.3s ease-out;
      }
      &:hover::before {
        opacity: 1;
        transform: translateX(0);
      }
      &::after {
        content: "";
        position: absolute;
        height: 4px;
        width: 0;
        bottom: 2px;
        left: -3px;
        opacity: 0;
        background: white;
        border: 2px solid black;
        transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
      }
      &:hover::after {
        opacity: 1;
        width: calc(100% + 6px);
      }
    }
  }
}

body {
  margin: 0;
  padding: 0;
}

给 a 添加 2 个伪元素，并分别为其设置transition以及hover时的状态即可

图片幻灯片

目的：四幅图片（这里用颜色代替）按顺序依次向右滑动显示，最后被四道白色矩形依次遮住

预览

<body>
  <main id="slider">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="paint">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </main>
</body>
$imgs: blue, cyan, yellow, tan;

html,
body {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  min-height: 100vh;
}

#slider {
  position: relative;
  width: 500px;
  height: 300px;
  margin: auto;
}

.image {
  position: absolute;
  width: 0%;
  height: 100%;
  overflow: hidden;

  &::after {
    content: "";
    display: block;
    width: 500px;
    height: 300px;
    background-size: cover;
    background-position: center;
  }

  @for $i from 1 through length($imgs) {
    &:nth-child(#{$i})::after {
      background-color: nth($imgs, $i);
    }
  }
}

.paint {
  position: absolute;
  width: 100%;
  height: 100%;

  div {
    width: 100%;
    height: 25%;
    background-color: white;
    transform: translateX(-100%);
  }
}

// animation
@for $i from 1 to 5 {
  .image:nth-child(#{$i}) {
    animation: show-image 0.7s ease (0.5s + 0.2s * $i - 0.2s) forwards;
  }
}

@for $i from 1 to 5 {
  .paint div:nth-child(#{$i}) {
    animation: slide-right 0.5s ease (1.6s + 0.1s * $i - 0.1s) forwards;
  }
}

// keyframes
@keyframes show-image {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

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

添加一个 slider，用flex使其垂直居中

在 slider 上添加 4 个 image，并使其大小和 slider 相同并重叠在一起，利用overflow:hidden隐藏它们

为这些 image 设置::after矩形伪元素，用作图片背景

创建show-image关键帧：元素的宽度从 0%变为 100%

为 image 创建动画：把show-image作为关键帧，每张图设置不同的延时delay，fill-mode设置forwards表示动画完成时保持最后一个关键帧的属性值，这样就完成了 4 张图依次向右滑动的效果

添加一个 paint 以及 4 个子 div，表示 4 道白色矩形，默认的位置是向 x 轴左侧平移 1 个元素单位

创建slide-right关键帧：向 x 轴左侧平移 1 个元素单位变为平移 0 个单位，也就是平移到原点

为 paint 的 4 个子 div 创建动画：把slide-right作为关键帧，同样给每个矩形设置不同的延时delay和forwards的fill-mode，就完成了四道白色矩形依次将图片遮住的效果

Previous前端NextJavaScript 进阶之道

Last updated

Was this helpful?