CSS实现炫酷动画背景

今天分享的这个小练习，我们在视频号上分享过，具体效果请看下面的视频：

因为在视频号的后台，有小伙伴留言说，想要这个案例的源码，所以，今天就把这个源码也分享出来了，有兴趣的小伙伴可以自行练习起来。

HTML代码：

<!doctype html><html><head>  <title>【每日一练】21—CSS实现炫酷动画背景</title></head><body>  <section>    <div class="layer layer1"></div>    <div class="layer layer2"></div>    <div class="layer layer3"></div>    <div class="layer layer4"></div>    <div class="layer layer5"></div>    <div class="layer layer6"></div>  </section></body></html>

CSS代码：

*{  margin: 0;  padding: 0;  box-sizing: border-box;}section{  position: relative;  width: 100%;  height: 100vh;  background: #131313;  overflow: hidden;}.layer{  position: absolute;  top: 50%;  left: 50%;  width: 140px;  height: 250vh;  box-shadow: inset -10px 0 40px rgba(0,0,0,1),  inset 10px 0 40px rgba(0,0,0,1),  inset -10px 0 10px rgba(255,255,255,0.25),  inset 10px 0 10px rgba(255,255,255,0.25),  0 0 50px rgba(0,0,0,1);}.layer.layer1 {  background: #222 radial-gradient(#6dff73 9px,#000 9px,#000 13px,transparent 13px);  background-size: 35px 35px;    animation: animateBg 2s linear infinite;  transform: translate(-50%,-50%) rotate(45deg);  z-index: 11;}.layer.layer2 {  background: #222 radial-gradient(#db0aff 9px,#000 9px,#000 13px,transparent 13px);  background-size: 35px 35px;    animation: animateBg2 2s linear infinite;  transform: translate(-50%,-38%) rotate(45deg);  z-index: 3;}.layer.layer3 {  background: #222 radial-gradient(#03a9f4 9px,#000 9px,#000 13px,transparent 13px);  background-size: 35px 35px;    animation: animateBg2 2s linear infinite;  transform: translate(-50%,-62%) rotate(45deg);  z-index: 3;}.layer.layer4 {  background: #222 radial-gradient(#ffc107 9px,#000 9px,#000 13px,transparent 13px);  background-size: 35px 35px;    animation: animateBg2 2s linear infinite;  transform: translate(-50%,-50%) rotate(-45deg);  z-index: 12;}.layer.layer5 {  background: #222 radial-gradient(#e91e63 9px,#000 9px,#000 13px,transparent 13px);  background-size: 35px 35px;    animation: animateBg 2s linear infinite;  transform: translate(-50%,-38%) rotate(-45deg);  z-index: 10;}.layer.layer6 {  background: #222 radial-gradient(#0f0 9px,#000 9px,#000 13px,transparent 13px);  background-size: 35px 35px;    animation: animateBg 2s linear infinite;  transform: translate(-50%,-62%) rotate(-45deg);  z-index: 10;}
@keyframes animateBg {  0%  {    background-position: 0 0;  }  100%  {    background-position: 35px -35px;  }}@keyframes animateBg2{  0%  {    background-position: 35px -35px;  }  100%  {    background-position: 0 0;  }}

写在最后

以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

CSS实现炫酷动画背景相关推荐

153.炫酷粒子背景特效
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:https://github.co ...
【每日一练】138—CSS实现炫酷背景动画效果
以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...
CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画
作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始. 微信公众号:AlbertYang 今天教大家使用CS ...
HTML+CSS实现炫酷的登录界面
你好,我是罡罡同学! 代码谱第一页忘掉心上人,最后一页...... 谢谢大家的支持,您的一键三连是罡罡同学前进的最大动力! 打赏一点钱,帮我买包辣条,继续创作,谢大家! 一键三连一键三连一键三连 ...
html舞动特效,7款纯CSS3实现的炫酷动画应用
原标题:7款纯CSS3实现的炫酷动画应用 HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效.但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以 ...
html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件.这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动. 使用方法 ...
高级UI- 属性动画炫酷动画案例+淘宝动画+源码解析+策略模式使用
文章目录属性动画源码: 案例1 案例2 最终效果思路 : 代码 TODU 案例3 加载的炫酷动画. 以及策略模式的使用效果图思路动画分析先实现小圆的旋转动画, 开始在ondraw里面写动画 ...
炫酷html动画,纯CSS3一个炫酷动画
纯CSS3一个炫酷动画通过下边的代码可以看到这个例子的html代码还是很简单的,中间类似图标的部分是通过给两个围绕盒子爬的虫子通过给 HTML代码 CSS代码 body{ margin: 0; b ...
使用vue3+element-plus+particles实现炫酷(粒子背景)登陆界面
效果图如下: 撸代码前准备(从无到有): 1.导入element-plus: # yarn yarn add element-plus # npm npm install element-plus - ...
3D炫酷雪花背景的实现
3D炫酷雪花背景,并且雪的大小还会随时间变化.目前已经开源到码云上,源码下载地址:https://gitee.com/hj1991/snowFalling . 效果展示(微信截动态变化背景图,效果不太 ...

CSS实现炫酷动画背景

CSS实现炫酷动画背景相关推荐

最新文章

热门文章