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

其他 2020-02-19 10:21:43 阅读次数: 0

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

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

  • Css3

  • outline

  • radial-gradient

  • linear-gradient

  • box-shadow

1.实现内部虚线边框

知识点：outline

640?wx_fmt=other

核心代码

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

2.边框内圆角的实现

知识点：box-shadow

640?wx_fmt=other

核心代码

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

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

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

640?wx_fmt=other

核心代码

/* 上 */	
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

640?wx_fmt=other

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

<style>	
.bg-grid{	
  margin-top: 20px;	
  width: 200px;	
  height: 200px;	
  background-image: linear-gradient(rgba(255,255,255,1) 2px,transparent 0),	
  linear-gradient(to right,rgba(255,255,255,1) 2px,transparent 0),	
  linear-gradient(rgba(255,255,255,.2) 1px,transparent 0),	
  linear-gradient(to right,rgba(255,255,255,.2) 1px,transparent 0);	
  background-position: -50px -50px;	
  background-size: 100px 100px,100px 100px, 100% 10px, 10px 100%;	
}	
.animate-grid{	
  animation: move-grid 6s linear infinite;	
}	
@keyframes move-grid{	
  0%{	
    background-position: -50px -50px;	
  }	
  30%{	
    background-position: -100px -100px;	
  }	
  60%{	
    background-position: -100px -150px;	
  }	
  100%{	
    background-position: -50px -50px;	
  }	
}	
</style>	
<div class="bg-grid black-theme"></div>	
<div class="bg-grid black-theme animate-grid"></div>

红绿灯以及红路灯随机运动动画

640?wx_fmt=other

利用css3多背景和position实现红绿灯和背景色块移动

核心代码

<style>	
.bg-dot{	
  margin-top: 20px;	
  width: 200px;	
  height: 50px;	
  background-image: radial-gradient(circle,#0cf 15px,transparent),	
                    radial-gradient(circle,red 15px,transparent),	
                    radial-gradient(circle,yellow 15px,transparent),	
                    radial-gradient(circle,green 15px,transparent);	
  background-repeat: no-repeat;	
  background-position: 0 0, 50px 0, 100px 0, 150px 0, 200px 0;	
  background-size: 50px 50px;	
}	
.animate-dot{	
  animation: move-dot 8s linear infinite;	
}	
.animate-dot2{	
  animation: move-dot2 6s linear infinite;	
}	
@keyframes move-dot{	
  0%{	
    background-position: 0 0, 50px 0, 100px 0, 150px 0;	
  }	
  30%{	
    background-position: 50px 0, 0 0, 100px 0, 150px 0;	
  }	
  60%{	
    background-position: 50px 0, 100px 0, 0 0, 150px 0;	
  }	
  100%{	
    background-position: 50px 0, 100px 0, 150px 0, 0 0;	
  }	
}	
@keyframes move-dot2{	
  0%{	
    background-image: radial-gradient(circle,#0cf 15px,transparent),	
                    radial-gradient(circle,gray 15px,transparent),	
                    radial-gradient(circle,gray 15px,transparent),	
                    radial-gradient(circle,gray 15px,transparent);	
  }	
  30%{	
    background-image: radial-gradient(circle,gray 15px,transparent),	
                    radial-gradient(circle,red 15px,transparent),	
                    radial-gradient(circle,gray 15px,transparent),	
                    radial-gradient(circle,gray 15px,transparent);	
  }	
  60%{	
    background-image: radial-gradient(circle,gray 15px,transparent),	
                    radial-gradient(circle,gray 15px,transparent),	
                    radial-gradient(circle,yellow 15px,transparent),	
                    radial-gradient(circle,gray 15px,transparent);	
  }	
  100%{	
    background-image: radial-gradient(circle,gray 15px,transparent),	
                    radial-gradient(circle,gray 15px,transparent),	
                    radial-gradient(circle,gray 15px,transparent),	
                    radial-gradient(circle,green 15px,transparent);	
  }	
}	
</style>	
<div class="bg-dot black-theme animate-dot"></div>	
<div class="bg-dot black-theme animate-dot2"></div>

棋盘背景以及棋盘背景随机动画

640?wx_fmt=other

利用背景渐变实现棋盘图案

核心代码

<style>	
.bg-qi{	
  margin-top: 20px;	
  width: 200px;	
  height: 200px;	
  background-color: #eee;	
  background-image: linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),	
  linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);	
  background-position: 0 0, 20px 20px;	
  background-size: 40px 40px;	
  box-shadow: 2px 2px 4px rgba(0,0,0,.4);	
}	
</style>	
<div class="bg-qi black-theme"></div>

伪随机背景

640?wx_fmt=other

利用背景渐变，keyframe动画，实现复杂的伪随机动画

核心代码

<style>	
.bg-line-rand{	
  margin-top: 20px;	
  width: 480px;	
  height: 60px;	
  background-color: #eee;	
  background-image: linear-gradient(90deg,#fb3 11px, transparent 0),	
                    linear-gradient(90deg,#ab4 23px, transparent 0),	
                    linear-gradient(90deg,#655 41px, transparent 0);	
  background-size: 41px 100%, 61px 100%, 83px 100%;	
  box-shadow: 2px 2px 4px rgba(0,0,0,.4);	
}	
.bg-dot-rand{	
  margin-top: 20px;	
  width: 200px;	
  height: 200px;	
  background-color: #eee;	
  background-image: radial-gradient(circle,#fb3 5px, transparent 0),	
                    radial-gradient(circle,#ab4 13px, transparent 0),	
                    radial-gradient(circle,#655 31px, transparent 0);	
  background-repeat: no-repeat;	
  background-size: 101px 203px, 147px 60px, 373px 201px;	
  box-shadow: 2px 2px 4px rgba(0,0,0,.4);	
}	
.animate1{	
  animation: move 4s linear infinite;	
}	
.animate2{	
  animation: move2 4s linear infinite;	
}	
@keyframes move{	
  0%{	
    background-position: 0 0, 0 0, 0 0;	
  }	
  50%{	
    background-position: -10px 0, 20px 0, 30px 0;	
  }	
  100%{	
    background-position: 0 0, 30px 0, 10px 0;	
  }	
}	
@keyframes move2{	
  0%{	
    background-position: 0 0, 0 0, 0 0;	
  }	
  50%{	
    background-position: -10px 30px, 20px 0, -40px 80px;	
  }	
  100%{	
    background-position: 0 20px, 60px -20px, 10px 30px;	
  }	
}	
</style>	
<div class="bg-line-rand black-theme"></div>	
<div class="bg-line-rand black-theme animate1"></div>	
<div class="bg-dot-rand black-theme animate2"></div>

5.折角效果

知识点：linear-gradient

640?wx_fmt=other

核心代码

<style>	
.fold{	
  margin-left: auto;	
  margin-right: auto;	
  margin-bottom: 20px;	
  width: 200px;	
  height: 80px;	
  color: #fff;	
  line-height: 80px;	
  text-align: center;	
  background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.5) 0) no-repeat 100% 0 / 2em 2em,	
              linear-gradient(-135deg,transparent 1.4em,#06c 0);	
}	
.linear{	
  background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.5)) no-repeat 100% 0 / 2em 2em,	
              linear-gradient(-135deg,transparent 1.4em,#06c);	
}	
</style>	
<div class="fold">折角效果哦</div>	
<div class="fold linear">折角效果哦</div>

2.内阴影圆折角效果

640?wx_fmt=other

核心代码

<style>	
.fold-1{	
  margin-left: auto;	
  margin-right: auto;	
  margin-bottom: 20px;	
  position: relative;	
  width: 200px;	
  height: 80px;	
  border-radius: .5em;	
  color: #fff;	
  line-height: 80px;	
  text-align: center;	
  background: linear-gradient(-150deg,transparent 1.5em, #58a 0);	
}	
.fold-1::before{	
  content: "";	
  position: absolute;	
  top: 0;	
  right: 0;	
  background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.2) 0,rgba(0,0,0,.4)) 100% 0 no-repeat;	
  width: 1.73em;	
  height: 3em;	
  transform: translateY(-1.3em) rotate(-30deg);	
  transform-origin: bottom right;	
  border-bottom-left-radius: inherit;	
  box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);	
}	
</style>	
<div class="fold-1">折角效果哦</div>

6.自适应文本的条纹背景

知识点：linear-gradient,line-height,background-origin

640?wx_fmt=other

核心代码

<style>	
.stripe-bg{	
  padding: .5em;	
  line-height: 1.5em;	
  background: beige;	
  background-size: auto 3em;	
  background-origin: content-box;	
  background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);	
}	
.stripe-bg > p{	
  margin: 0;	
}	
</style>	
<div class="stripe-bg">	
  <p>hello you</p>	
  <p>hello you</p>	
  <p>hello you</p>	
  <p>hello you</p>	
  <p>hello you</p>	
</div>

7.自定义的下划线实现

知识点linear-gridient

640?wx_fmt=other

小伙伴们注意到了吗？默认的下划线会将文字穿过，而上面的不会呦！

核心代码

<style>	
.my-line{	
  line-height: 1.4em;	
  background: linear-gradient(gray,gray) no-repeat;	
  background-size: 100% 1px;	
  background-position: 0 1.15em;	
  text-shadow: .05em 0 #fff, -.05em 0 #fff;	
}	
</style>	
<div class=""><span class="my-line">i have your big apple.you have a too? hi hi hi.</span></div>

最后

笔者3天后将推出开源的CMS系统，技术架构：

  • 后台Node+Koa+redis+JsonSchema

  • 管理后台界面 vue-cli3 + vue + ts + vuex + antd-vue + axios

  • 客户端前台 react + antd + react-hooks + axios

后面将推出该系统的设计思想，架构和实现过程，欢迎在公众号《趣谈前端》里查看更详细的介绍。

另外我们组建了 趣谈前端社群，欢迎大家和来自不同公司前端开发者，一起交流讨论前端开发场景，前端日常工作中遇到的问题及解决办法，以及前端职业发展的探讨。

欢迎大家相互学习交流，一起探索前端的边界。

趣谈前端

Vue、React、小程序、Node 

640?wx_fmt=jpeg 

前端 算法|性能|架构|安全

徐小夕_上海
发布了57 篇原创文章 · 获赞 83 · 访问量 1万+
私信 关注

猜你喜欢

转载自blog.csdn.net/KlausLily/article/details/101188177
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022