box-shadow和filter篇

利用css3的新特性可以帮助我们实现各种意想不到的特效,下面就来一起看看吧~

程序员必读

Css3编码技巧

1.实现水波动画

知识点：box-shadow

• 核心代码

  // css
  @keyframes wave {
      0% {
          box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);
      }
      50% {
          box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);
      }
      100% {
          box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);
      }
  }

2.实现加载动画

知识点：box-shadow多阴影

• 核心代码

  // css
  @keyframes load {
      0% {
          box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
                      inset 0 0 0 15px rgba(250, 189, 189, 0),
                      40px 0 0 rgba(250, 189, 189, 0);
      }
      30% {
          box-shadow: -40px 0 0 rgba(250, 189, 189, 1),
                      inset 0 0 0 15px rgba(250, 189, 189, 0),
                      40px 0 0 rgba(250, 189, 189, 0);
      }
      60% {
          box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
                      inset 0 0 0 15px rgba(250, 189, 189, 1),
                      40px 0 0 rgba(250, 189, 189, 0);
      }
      100% {
          box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
                      inset 0 0 0 15px rgba(250, 189, 189, 0),
                      40px 0 0 rgba(250, 189, 189, 1);
      }
  }

3.投影

知识点：box-shadow

1.单侧投影

• 核心代码

  box-shadow: 0 8px 4px -4px #666;

2.双侧投影

• 核心代码

  box-shadow: 8px 0 10px -8px #000,
              -8px 0 10px -8px #000;

3.不规则投影

哎呦，猪先森

• 核心代码

  /* 注：padding/margin设置百分比单位时，是基于父元素宽度的 */
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.8))

4.滤镜filter

1.染色效果

原图

染色后--sepia()会给图片增加一种降饱和度的橙黄色染色效果

染色后--saturate()会给图片的每个像素提高饱和度

染色后--hue-rotate()会给每个像素的色相进以指定度数进行偏移

染色后--多个滤镜组合

• 核心代码

/* sepia() */
filter: sepia(1)
/* saturate() */
filter: saturate(4)
/* hue-rotate() */
filter: hue-rotate(295deg)
/* 混合 */
filter: sepia(1) saturate(2) hue-rotate(100deg)

2.模糊效果

Mr XuJiang, Love you.

• 核心代码

filter: blur(20px);