用css3实现惊艳面试官的背景即背景动画（高级附源码）

我们传统的前端更多的是用javascript实现各种复杂动画，自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。

 

这篇文章参考《css揭秘》这本书，并作出了自己的总结，希望能让大家更有收获，也强烈推荐大家看看这本书，你值得拥有。我们将学到

• Css3

• outline

• radial-gradient

• linear-gradient

• box-shadow

1.实现内部虚线边框

知识点：outline

核心代码

.dash-border{	
  width: 200px;	
  height: 100px;	
  line-height: 100px;	
  outline: 1px dashed #fff;	
  outline-offset: -10px;	
}

2.边框内圆角的实现

知识点：box-shadow

核心代码

.radius-border{	
  margin-top: 20px;	
  width: 180px;	
  height: 80px;	
  box-shadow: 0 0 0 10px gray;	
}

3.实现条纹背景与进度条

知识点：linear-gradient,repeating-linear-gradient

核心代码

/* 上 */	
background: linear-gradient(to right,#fb3 50%,#58a 0);	
background-size: 40px 100%;	
box-shadow: inset 0 0 3px #555;	

	
/* 中 */	
background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);	
background-size: 40px 40px;	

	
/* 下 (可以实现任意角度的渐变，45°时显示效果最好) */	
background: repeating-linear-gradient(60deg,#fb3,#fb3 15px,#58a 0,#58a 30px);

4.复杂的背景图案

知识点：linear-gradient,repeating-linear-gradient,radial-gradient

由于第二个图会有复杂的随机动画，建议大家可以亲自尝试看看效果，核心代码

<style>	
.bg-grid{	
  margin-top: 20px;	
  width: 200px;	
  height: 200px;	
  background-image: linear-gradi