<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3圆点虚化背景动画特效 - 网页模板</title>
<style>
* {
box-sizing: border-box;
}
body {
background: -webkit-linear-gradient(bottom right, #3F1344 10%, #4A1742 20%, #522357 50%, #5539B2);
background: linear-gradient(to top left, #3F1344 10%, #4A1742 20%, #522357 50%, #5539B2);
height: 100vh;
overflow: hidden;
}
#canvas {
position: absolute;
top: 0;
left: 0;
z-index: -11;
-webkit-animation: spin 300s linear infinite;
animation: spin 300s linear infinite;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.circle {
position: absolute;
border-radius: 50%;
}
.circle:nth-child(1) {
background: #db92db;
box-shadow: 0 0 8px 7px #db92db;
top: 85%;
left: 22%;
width: 42px;
height: 42px;
opacity: 0.16;
-webkit-animation: float1 20s infinite linear;
animation: float1 20s infinite linear;
}
.circle:nth-child(2) {
background: #7c2bad;
box-shadow: 0 0 5px 4px #7c2bad;
top: 5%;
left: 66%;
width: 34px;
height: 34px;
opacity: 0.95;
-webkit-animation: float2 20s infinite linear;
animation: float2 20s infinite linear;
}
.circle:nth-child(3) {
background: #e0b6e6;
box-shadow: 0 0 1px 3px #e0b6e6;
top: 90%;
left: 91%;
width: 99px;
height: 99px;
opacity: 0.02;
-webkit-animation: float3 20s infinite linear;
animation: float3 20s infinite linear;
}
.circle:nth-child(4) {
background: #e094d4;
box-shadow: 0 0 10px 9px #e094d4;
top: 29%;
left: 42%;
width: 62px;
height: 62px;
opacity: 0.42;
-webkit-animation: float4 20s infinite linear;
animation: float4 20s infinite linear;
}
.circle:nth-child(5) {
background: #b04ccc;
box-shadow: 0 0 6px 8px #b04ccc;
top: 98%;
left: 50%;
width: 74px;
height: 74px;
opacity: 0.09;
-webkit-animation: float5 20s infinite linear;
animation: float5 20s infinite linear;
}
.circle:nth-child(6) {
background: #d7a3d5;
box-shadow: 0 0 1px 6px #d7a3d5;
top: 67%;
left: 89%;
width: 23px;
height: 23px;
opacity: 0.88;
-webkit-animation: float6 20s infinite linear;
animation: float6 20s infinite linear;
}
.circle:nth-child(7) {
background: #d77ec7;
box-shadow: 0 0 10px 5px #d77ec7;
top: 70%;
left: 62%;
width: 63px;
height: 63px;
opacity: 0.2;
-webkit-animation: float7 20s infinite linear;
animation: float7 20s infinite linear;
}
.circle:nth-child(8) {
background: #983cbd;
box-shadow: 0 0 9px 5px #983cbd;
top: 41%;
left: 90%;
width: 62px;
height: 62px;
opacity: 0.97;
-webkit-animation: float8 20s infinite linear;
animation: float8 20s infinite linear;
}
.circle:nth-child(9) {
background: #e0b4e6;
box-shadow: 0 0 6px 5px #e0b4e6;
top: 84%;
left: 90%;
width: 40px;
height: 40px;
opacity: 0.26;
-webkit-animation: float9 20s infinite linear;
animation: float9 20s infinite linear;
}
.circle:nth-child(10) {
background: #9c3ab0;
box-shadow: 0 0 9px 5px #9c3ab0;
top: 5%;
left: 63%;
width: 69px;
height: 69px;
opacity: 0.68;
-webkit-animation: float10 20s infinite linear;
animation: float10 20s infinite linear;
}
.circle:nth-child(11) {
background: #8542b2;
box-shadow: 0 0 4px 7px #8542b2;
top: 87%;
left: 37%;
width: 3px;
height: 3px;
opacity: 0.28;
-webkit-animation: float11 20s infinite linear;
animation: float11 20s infinite linear;
}
.circle:nth-child(12) {
background: #f777ee;
box-shadow: 0 0 8px 4px #f777ee;
top: 71%;
left: 91%;
width: 66px;
height: 66px;
opacity: 0.74;
-webkit-animation: float12 20s infinite linear;
animation: float12 20s infinite linear;
}
.circle:nth-child(13) {
background: #be6fde;
box-shadow: 0 0 7px 5px #be6fde;
top: 17%;
left: 52%;
width: 59px;
height: 59px;
opacity: 0.68;
-webkit-animation: float13 20s infinite linear;
animation: float13 20s infinite linear;
}
.circle:nth-child(14) {
background: #db85c6;
box-shadow: 0 0 10px 8px #db85c6;
top: 26%;
left: 80%;
width: 77px;
height: 77px;
opacity: 0.58;
-webkit-animation: float14 20s infinite linear;
animation: float14 20s infinite linear;
}
.circle:nth-child(15) {
background: #bd4cb4;
box-shadow: 0 0 9px 2px #bd4cb4;
top: 7%;
left: 100%;
width: 18px;
height: 18px;
opacity: 0.33;
-webkit-animation: float15 20s infinite linear;
animation: float15 20s infinite linear;
}
.circle:nth-child(16) {
background: #bf70b6;
box-shadow: 0 0 6px 3px #bf70b6;
top: 51%;
left: 25%;
width: 52px;
height: 52px;
opacity: 0.44;
-webkit-animation: float16 20s infinite linear;
animation: float16 20s infinite linear;
}
.circle:nth-child(13) {
background: #be6fde;
box-shadow: 0 0 4px 2px #be6fde;
top: 58%;
left: 67%;
width: 36px;
height: 36px;
opacity: 0.57;
-webkit-animation: float13 20s infinite linear;
animation: float13 20s infinite linear;
}
.circle:nth-child(18) {
background: #deb8e9;
box-shadow: 0 0 7px 7px #deb8e9;
top: 64%;
left: 67%;
width: 28px;
height: 28px;
opacity: 0.86;
-webkit-animation: float18 20s infinite linear;
animation: float18 20s infinite linear;
}
.circle:nth-child(19) {
background: #b891d8;
box-shadow: 0 0 3px 1px #b891d8;
top: 70%;
left: 34%;
width: 40px;
height: 40px;
opacity: 0.69;
-webkit-animation: float19 20s infinite linear;
animation: float19 20s infinite linear;
}
.circle:nth-child(20) {
background: #bb6bdc;
box-shadow: 0 0 2px 3px #bb6bdc;
top: 37%;
left: 46%;
width: 72px;
height: 72px;
opacity: 0.9;
-webkit-animation: float20 20s infinite linear;
animation: float20 20s infinite linear;
}
.circle:nth-child(21) {
background: #b378d5;
box-shadow: 0 0 4px 5px #b378d5;
top: 35%;
left: 67%;
width: 16px;
height: 16px;
opacity: 0.95;
-webkit-animation: float21 20s infinite linear;
animation: float21 20s infinite linear;
}
.circle:nth-child(22) {
background: #8d36da;
box-shadow: 0 0 7px 1px #8d36da;
top: 68%;
left: 64%;
width: 57px;
height: 57px;
opacity: 0.65;
-webkit-animation: float22 20s infinite linear;
animation: float22 20s infinite linear;
}
.circle:nth-child(23) {
background: #b444c8;
box-shadow: 0 0 10px 8px #b444c8;
top: 89%;
left: 34%;
width: 19px;
height: 19px;
opacity: 0.08;
-webkit-animation: float23 20s infinite linear;
animation: float23 20s infinite linear;
}
.circle:nth-child(24) {
background: #b48cd5;
box-shadow: 0 0 2px 6px #b48cd5;
top: 70%;
left: 31%;
width: 2px;
height: 2px;
opacity: 0.51;
-webkit-animation: float24 20s infinite linear;
animation: float24 20s infinite linear;
}
.circle:nth-child(25) {
background: #8f2aac;
box-shadow: 0 0 3px 6px #8f2aac;
top: 20%;
left: 71%;
width: 59px;
height: 59px;
opacity: 0.93;
-webkit-animation: float25 20s infinite linear;
animation: float25 20s infinite linear;
}
.circle:nth-child(26) {
background: #ae78db;
box-shadow: 0 0 10px 5px #ae78db;
top: 7%;
left: 18%;
width: 98px;
height: 98px;
opacity: 0.14;
-webkit-animation: float26 20s infinite linear;
animation: float26 20s infinite linear;
}
.circle:nth-child(27) {
background: #dd7dd1;
box-shadow: 0 0 6px 9px #dd7dd1;
top: 95%;
left: 82%;
width: 51px;
height: 51px;
opacity: 0.14;
-webkit-animation: float27 20s infinite linear;
animation: float27 20s infinite linear;
}
.circl
CSS3圆点虚化背景动画特效.zip
版权申诉
87 浏览量
2022-11-17
21:18:58
上传
评论
收藏 35KB ZIP 举报
CSS3圆点虚化背景动画特效.zip （2个子文件） 
CSS3圆点虚化背景动画特效 
CSS3圆点虚化背景动画特效.jpg 36KB jiaoben4930 
index.html 69KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 简单的Linux C代码，实现链表功能
- 汇编语言探索之旅：从基础到实践，解锁底层奥秘-markdown材料.zip
- Fortran语言：经典与现代交织的编程之旅-markdown材料.zip
- 基于python编写的appium自动化框架，采用PO模式，并集成了日志以及测试报告通过邮件发送的功能
- csdn.apk
- spleeter模型下载
- 微信小程序 - 图书管理系统源码.zip
- 微信小程序 - 图片自适应 ，富文本解析源码.zip
- 微信小程序 - 同乐居商城：购物车合算源码
- 1、根据输入的三条边值判断能组成何种三角形，并设计测试数据进行判定覆盖测试 三条边为变量a、b、c，范围为1≤边值≤10，不在范
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
