前端开发技巧-CSS Figure

阳明先生 2018/5/12 frontend css

使用 div 描绘各种图形

要点：<div> 配合其伪元素(::before、::after)通过 clip、transform 等方式绘制各种图形

场景：各种图形容器

兼容：clip、transform

代码：在线演示

使用 mask 雕刻镂空背景

要点：通过 mask 为图像背景生成蒙层提供遮罩效果

场景：高斯模糊蒙层、票劵(电影票、购物卡)、遮罩动画

兼容：mask、animation、perspective、transform-style

代码：在线演示

$mask-bg: 'https://yangzw.vip/static/codepen/mask-bg.jpg';
$mask-text: 'https://yangzw.vip/static/codepen/mask-text.jpg';
$logo: 'https://yangzw.vip/static/codepen/logo-netease.svg';

.bruce {
  overflow: hidden;
  &::after {
    position: absolute;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    background: url($mask-bg) no-repeat center/cover;
    filter: blur(10px);
    content: '';
  }
}
.mask-layer {
  position: relative;
  z-index: 9;
  width: 600px;
  height: 300px;
  background: url($mask-text) left center/150% auto;
  mask: url($logo) center/cover;
  animation: move 10s infinite;
}
@keyframes move {
  0% {
    background-position-x: 0;
  }
  50% {
    background-position-x: 100%;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

使用 filter 描绘头像彩色阴影

要点：通过 filter: blur() brightness() opacity() 模拟阴影效果

场景：头像阴影

兼容：filter

代码：在线演示

$avatar: 'https://yangzw.vip/static/codepen/thor.jpg';

.avatar-shadow {
  position: relative;
  border-radius: 100%;
  width: 200px;
  height: 200px;
  background: url($avatar) no-repeat center/cover;
  &::after {
    position: absolute;
    left: 0;
    top: 10%;
    z-index: -1;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: blur(10px) brightness(80%) opacity(0.8);
    content: '';
    transform: scale(0.95);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用 linear-gradient 描绘波浪线

要点：通过 linear-gradient 绘制波浪线

场景：文字强化显示、文字下划线、内容分割线

兼容：gradient

代码：在线演示

@mixin waveline($h, $color: $red) {
  position: relative;
  &::after {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: $h;
    background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%),
      linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
    background-size: $h * 2 $h * 2;
    content: '';
  }
}
.waveline-text {
  height: 20px;
  line-height: 20px;
  letter-spacing: 10px;
  @include waveline(10px);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用 linear-gradient 描绘彩带

要点：通过 repeating-linear-gradient 绘制间断颜色的彩带

场景：主题化

兼容：gradient

代码：在线演示

.colour-bar {
  width: 500px;
  height: 50px;
  background-image: repeating-linear-gradient(90deg, $red, $red 50px, $purple 50px, $purple 100px);
}

1
2
3
4
5

使用 conic-gradient 描绘饼图

要点：通过 conic-gradient 绘制多种色彩的饼图

场景：项占比饼图

兼容：gradient

代码：在线演示

.pie-chart {
  border-radius: 100%;
  width: 300px;
  height: 300px;
  background-image: conic-gradient($red 0 25%, $purple 25% 30%, $orange 30% 55%, $blue 55% 70%, $green 70% 100%);
}

1
2
3
4
5
6

使用 linear-gradient 描绘方格背景

要点：使用 linear-gradient 绘制间断颜色的彩带进行交互生成方格

场景：格子背景、占位图

兼容：gradient

代码：在线演示

.square-bg {
  width: 500px;
  height: 300px;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee
        25%, transparent 25%, transparent 75%, #eee 75%);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
}

1
2
3
4
5
6
7
8

使用 box-shadow 描绘单侧投影

要点：通过 box-shadow 生成投影，且模糊半径和负的扩张半径一致，使投影偏向一侧

场景：容器投影、背景补间动画、立体投影、文字立体投影、文字渐变立体投影、长投影、霓虹灯、灯光阴影

兼容：box-shadow、filter、text-shadow

代码：在线演示

.aside-shadow {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  width: 100px;
  height: 100px;
  box-shadow: -7px 0 5px -5px $orange;
  font-weight: bold;
  font-size: 30px;
  color: $orange;
}

1
2
3
4
5
6
7
8
9
10
11
12

使用 box-shadow 裁剪图像

要点：通过 box-shadow 模拟蒙层实现中间镂空

场景：图片裁剪、新手引导、背景镂空、投射定位

兼容：box-shadow

代码：在线演示

.img-cliper {
  overflow: hidden;
  position: relative;
  img {
    width: 400px;
  }
  i {
    position: absolute;
    left: 50px;
    top: 30px;
    border-radius: 100%;
    width: 100px;
    height: 50px;
    box-shadow: 0 0 0 9999px rgba(#000, 0.5);
  }
  .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用 outline 描绘内边框

要点：通过 outline 设置轮廓进行描边，可设置 outline-offset 设置内描边

场景：内描边、外描边

兼容：outline

代码：在线演示

.outside-border {
  outline: 10px dashed $blue;
  outline-offset: -50px;
  border: 10px dashed $orange;
  width: 300px;
  height: 300px;
  background-color: $green;
}

1
2
3
4
5
6
7
8

PS：本文整理自 https://juejin.im/post/5d4d0ec651882549594e7293 侵删。