【每日一练】21—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;}
}

写在最后

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

我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号

【每日一练】21—CSS实现炫酷动画背景相关推荐

153.炫酷粒子背景特效
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:https://github.co ...
【每日一练】138—CSS实现炫酷背景动画效果
以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...
Android 炫酷动画APP,21 款炫酷动画开源框架，照亮你的APP
原标题:21 款炫酷动画开源框架,照亮你的APP 2017年安卓巴士全球开发者论坛-上海站前言最近对应用的UI视觉效果突然来了兴致,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对 ...
HTML+CSS实现炫酷的登录界面
你好,我是罡罡同学! 代码谱第一页忘掉心上人,最后一页...... 谢谢大家的支持,您的一键三连是罡罡同学前进的最大动力! 打赏一点钱,帮我买包辣条,继续创作,谢大家! 一键三连一键三连一键三连 ...
CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画
作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始. 微信公众号:AlbertYang 今天教大家使用CS ...
纯css实现炫酷侧边栏
纯css实现炫酷侧边栏有疑问的小伙伴可以深入探讨学习
炫酷html动画,纯CSS3一个炫酷动画
纯CSS3一个炫酷动画通过下边的代码可以看到这个例子的html代码还是很简单的,中间类似图标的部分是通过给两个围绕盒子爬的虫子通过给 HTML代码 CSS代码 body{ margin: 0; b ...
html舞动特效,7款纯CSS3实现的炫酷动画应用
原标题:7款纯CSS3实现的炫酷动画应用 HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效.但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以 ...
3D炫酷雪花背景的实现
3D炫酷雪花背景,并且雪的大小还会随时间变化.目前已经开源到码云上,源码下载地址:https://gitee.com/hj1991/snowFalling . 效果展示(微信截动态变化背景图,效果不太 ...
html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件.这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动. 使用方法 ...

【每日一练】21—CSS实现炫酷动画背景

【每日一练】21—CSS实现炫酷动画背景相关推荐

最新文章

热门文章