AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-04-30 294
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 我们传统的前端更多的是用javascript实现各种复杂动画，自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。这篇文章参考《css揭秘》这本书，并作出了自己的总结，希望能让大家更有收获，也强烈推荐大家看看这本书，你值得拥有。

我们传统的前端更多的是用javascript实现各种复杂动画，自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。这篇文章参考《css揭秘》这本书，并作出了自己的总结，希望能让大家更有收获，也强烈推荐大家看看这本书，你值得拥有。


我们将学到


  • Css3
  • outline
  • radial-gradient
  • linear-gradient
  • box-shadow

程序员必读


Css3编码技巧


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-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>

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



利用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>

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



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


核心代码

<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>

伪随机背景



利用背景渐变，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



核心代码

<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.内阴影圆折角效果



核心代码

<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


核心代码


<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



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


核心代码

<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


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



文章标签：
JavaScript
前端开发
程序员
关键词：
CSS动画源码
CSS源码
CSS动画
面试源码
CSS面试
徐小夕
目录
相关文章
疯狂的猿
|
3天前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
疯狂的猿
38 22
疯狂的猿
|
12天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
疯狂的猿
85 24
蓝染-惣右介
|
15天前
|
Java 数据库连接 Maven
最新版 | 深入剖析SpringBoot3源码——分析自动装配原理（面试常考）
自动装配是现在面试中常考的一道面试题。本文基于最新的 SpringBoot 3.3.3 版本的源码来分析自动装配的原理，并在文未说明了SpringBoot2和SpringBoot3的自动装配源码中区别，以及面试回答的拿分核心话术。
蓝染-惣右介
41 2
最新版 | 深入剖析SpringBoot3源码——分析自动装配原理（面试常考）
疯狂的猿
|
2月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
疯狂的猿
60 31
疯狂的猿
|
1月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果，呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现，没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
疯狂的猿
43 6
喜欢猪猪
|
1月前
|
存储 缓存 Java
Spring面试必问：手写Spring IoC 循环依赖底层源码剖析
在Spring框架中，IoC（Inversion of Control，控制反转）是一个核心概念，它允许容器管理对象的生命周期和依赖关系。然而，在实际应用中，我们可能会遇到对象间的循环依赖问题。本文将深入探讨Spring如何解决IoC中的循环依赖问题，并通过手写源码的方式，让你对其底层原理有一个全新的认识。
喜欢猪猪
57 2
众所周知
|
2月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画，这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动，增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析，旨在为设计师和开发者提供实用指导。
众所周知
72 7
疯狂的猿
|
2月前
CSS3注册表单文本框占位符特效源码
CSS3注册表单文本框占位符特效源码是一段简单的css3 input文本框占位符，placeholders占位符内容填写注册表单特效，非常有意思，欢迎有兴趣的朋友前来下载使用。
疯狂的猿
31 5
疯狂的猿
|
2月前
|
前端开发
CSS制作月球行走404页面特效源码
CSS制作月球行走404页面特效源码是一款迈克杰克逊在月球上漫步走路404页面模板下载。效果非常逼真，感兴趣的朋友可以查看效果演示，也可以下载源码。
疯狂的猿
25 3
疯狂的猿
|
2月前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
疯狂的猿
20 0
CSS3几何透明层文本悬停变色源码

热门文章

最新文章

  • 1
    京东面试：聊聊Spring事务？Spring事务的10种失效场景？加入型传播和嵌套型传播有什么区别？
  • 2
    Java社招面试题：& 和 && 的区别，HR的套路险些让我翻车！
  • 3
    字节面试：聊聊 CAP 定理？哪些中间件是AP？ 哪些是CP？ 说说 为什么？
  • 4
    MySQL进阶突击系列(03) MySQL架构原理solo九魂17环连问 | 给大厂面试官的一封信
  • 5
    面试的系统设计题，给我整懵了。。。
  • 6
    只会“有序无序”？面试官嫌弃的List、Set、Map回答！
  • 7
    阿里面试：聊聊 CAP 定理？哪些中间件是AP？为什么？
  • 8
    Spring面试必问：手写Spring IoC 循环依赖底层源码剖析
  • 9
    面试官刁钻提问？轻松应对 break、continue 和 return 的巧妙用法
  • 10
    面试官的加分题：super关键字全解析，轻松应对！
  • 1
    css结构伪类
    68
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    97
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    62
  • 4
    HTML5/CSS3粒子效果进度条代码
    81
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    149
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    66
  • 7
    CSS外边距重叠：原理、结果
    58
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    69
  • 9
    CSS常见用法 以及JS基础语法
    72
  • 10
    css设置内嵌样式阴影
    80

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • 阿里云技术面试红宝书
  • 超全算法笔试-模拟题精解合集
  • 程序员面试宝典

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅