css实现炫酷曲线交织背景动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现炫酷曲线交织背景动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@charset "UTF-8";
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #140032;
overflow: hidden;
margin: 0;
}
body *, body *:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 100% 200%;
perspective-origin: 100% 200%;
}
.💣:nth-child(1) {
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.💣:nth-child(2) {
-webkit-transform: scale(1, -1);
transform: scale(1, -1);
}
.💣:nth-child(3) {
-webkit-transform: scale(-1, -1);
transform: scale(-1, -1);
}
.🔥 {
width: 150px;
height: 150px;
-webkit-animation: 🔥 2s ease-in-out infinite;
animation: 🔥 2s ease-in-out infinite;
}
.🔥:after {
content: "";
border-top: 6px dotted transparent;
}
.🔥:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.🔥:nth-child(1):after {
-webkit-transform: rotateX(0deg) translate(0px) scaleX(0);
transform: rotateX(0deg) translate(0px) scaleX(0);
border-color: #2b00ff;
}
.🔥:nth-child(2) {
-webkit-animation-delay: -0.04s;
animation-delay: -0.04s;
}
.🔥:nth-child(2):after {
-webkit-transform: rotateX(7.2deg) translate(6px) scaleX(0.02);
transform: rotateX(7.2deg) translate(6px) scaleX(0.02);
border-color: #2f00ff;
}
.🔥:nth-child(3) {
-webkit-animation-delay: -0.08s;
animation-delay: -0.08s;
}
.🔥:nth-child(3):after {
-webkit-transform: rotateX(14.4deg) translate(12px) scaleX(0.04);
transform: rotateX(14.4deg) translate(12px) scaleX(0.04);
border-color: #3300ff;
}
.🔥:nth-child(4) {
-webkit-animation-delay: -0.12s;
animation-delay: -0.12s;
}
.🔥:nth-child(4):after {
-webkit-transform: rotateX(21.6deg) translate(18px) scaleX(0.06);
transform: rotateX(21.6deg) translate(18px) scaleX(0.06);
border-color: #3700ff;
}
.🔥:nth-child(5) {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.🔥:nth-child(5):after {
-webkit-transform: rotateX(28.8deg) translate(24px) scaleX(0.08);
transform: rotateX(28.8deg) translate(24px) scaleX(0.08);
border-color: #3c00ff;
}
.🔥:nth-child(6) {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.🔥:nth-child(6):after {
-webkit-transform: rotateX(36deg) translate(30px) scaleX(0.1);
transform: rotateX(36deg) translate(30px) scaleX(0.1);
border-color: #4000ff;
}
.🔥:nth-child(7) {
-webkit-animation-delay: -0.24s;
animation-delay: -0.24s;
}
.🔥:nth-child(7):after {
-webkit-transform: rotateX(43.2deg) translate(36px) scaleX(0.12);
transform: rotateX(43.2deg) translate(36px) scaleX(0.12);
border-color: #4400ff;
}
.🔥:nth-child(8) {
-webkit-animation-delay: -0.28s;
animation-delay: -0.28s;
}
.🔥:nth-child(8):after {
-webkit-transform: rotateX(50.4deg) translate(42px) scaleX(0.14);
transform: rotateX(50.4deg) translate(42px) scaleX(0.14);
border-color: #4800ff;
}
.🔥:nth-child(9) {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.🔥:nth-child(9):after {
-webkit-transform: rotateX(57.6deg) translate(48px) scaleX(0.16);
transform: rotateX(57.6deg) translate(48px) scaleX(0.16);
border-color: #4d00ff;
}
.🔥:nth-child(10) {
-webkit-animation-delay: -0.36s;
animation-delay: -0.36s;
}
.🔥:nth-child(10):after {
-webkit-transform: rotateX(64.8deg) translate(54px) scaleX(0.18);
transform: rotateX(64.8deg) translate(54px) scaleX(0.18);
border-color: #5100ff;
}
.🔥:nth-child(11) {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.🔥:nth-child(11):after {
-webkit-transform: rotateX(72deg) translate(60px) scaleX(0.2);
transform: rotateX(72deg) translate(60px) scaleX(0.2);
border-color: #5500ff;
}
.🔥:nth-child(12) {
-webkit-animation-delay: -0.44s;
animation-delay: -0.44s;
}
.🔥:nth-child(12):after {
-webkit-transform: rotateX(79.2deg) translate(66px) scaleX(0.22);
transform: rotateX(79.2deg) translate(66px) scaleX(0.22);
border-color: #5900ff;
}
.🔥:nth-child(13) {
-webkit-animation-delay: -0.48s;
animation-delay: -0.48s;
}
.🔥:nth-child(13):after {
-webkit-transform: rotateX(86.4deg) translate(72px) scaleX(0.24);
transform: rotateX(86.4deg) translate(72px) scaleX(0.24);
border-color: #5e00ff;
}
.🔥:nth-child(14) {
-webkit-animation-delay: -0.52s;
animation-delay: -0.52s;
}
.🔥:nth-child(14):after {
-webkit-transform: rotateX(93.6deg) translate(78px) scaleX(0.26);
transform: rotateX(93.6deg) translate(78px) scaleX(0.26);
border-color: #6200ff;
}
.🔥:nth-child(15) {
-webkit-animation-delay: -0.56s;
animation-delay: -0.56s;
}
.🔥:nth-child(15):after {
-webkit-transform: rotateX(100.8deg) translate(84px) scaleX(0.28);
transform: rotateX(100.8deg) translate(84px) scaleX(0.28);
border-color: #6600ff;
}
.🔥:nth-child(16) {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.🔥:nth-child(16):after {
-webkit-transform: rotateX(108deg) translate(90px) scaleX(0.3);
transform: rotateX(108deg) translate(90px) scaleX(0.3);
border-color: #6a00ff;
}
.🔥:nth-child(17) {
-webkit-animation-delay: -0.64s;
animation-delay: -0.64s;
}
.🔥:nth-child(17):after {
-webkit-transform: rotateX(115.2deg) translate(96px) scaleX(0.32);
transform: rotateX(115.2deg) translate(96px) scaleX(0.32);
border-color: #6f00ff;
}
.🔥:nth-child(18) {
-webkit-animation-delay: -0.68s;
animation-delay: -0.68s;
}
.🔥:nth-child(18):after {
-webkit-transform: rotateX(122.4deg) translate(102px) scaleX(0.34);
transform: rotateX(122.4deg) translate(102px) scaleX(0.34);
border-color: #7300ff;
}
.🔥:nth-child(19) {
-webkit-animation-delay: -0.72s;
animation-delay: -0.72s;
}
.🔥:nth-child(19):after {
-webkit-transform: rotateX(129.6deg) translate(108px) scaleX(0.36);
transform: rotateX(129.6deg) translate(108px) scaleX(0.36);
border-color: #7700ff;
}
.🔥:nth-child(20) {
-webkit-animation-delay: -0.76s;
animation-delay: -0.76s;
}
.🔥:nth-child(20):after {
-webkit-transform: rotateX(136.8deg) translate(114px) scaleX(0.38);
transform: rotateX(136.8deg) translate(114px) scaleX(0.38);
border-color: #7b00ff;
}
.🔥:nth-child(21) {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.🔥:nth-child(21):after {
-webkit-transform: rotateX(144deg) translate(120px) scaleX(0.4);
transform: rotateX(144deg) translate(120px) scaleX(0.4);
border-color: #8000ff;
}
.🔥:nth-child(22) {
-webkit-animation-delay: -0.84s;
animation-delay: -0.84s;
}
.🔥:nth-child(22):after {
-webkit-transform: rotateX(151.2deg) translate(126px) scaleX(0.42);
transform: rotateX(151.2deg) translate(126px) scaleX(0.42);
border-color: #8400ff;
}
.🔥:nth-child(23) {
-webkit-animation-delay: -0.88s;
animation-delay: -0.88s;
}
.🔥:nth-child(23):after {
-webkit-transform: rotateX(158.4deg) translate(132px) scaleX(0.44);
transform: rotateX(158.4deg) translate(132px) scaleX(0.44);
border-color: #8800ff;
}
.🔥:nth-child(24) {
-webkit-animation-delay: -0.92s;
animation-delay: -0.92s;
}
.🔥:nth-child(24):after {
-webkit-transform: rotateX(165.6deg) translate(138px) scaleX(0.46);
transform: rotateX(165.6deg) translate(138px) scaleX(0.46);
border-color: #8c00ff;
}
.🔥:nth-child(25) {
-webkit-animation-delay: -0.96s;
animation-delay: -0.96s;
}
.🔥:nth-child(25):after {
-webkit-transform: rotateX(172.8deg) translate(144px) scaleX(0.48);
transform: rotateX(172.8deg) translate(144px) scaleX(0.48);
border-color: #9100ff;
}
.🔥:nth-child(26) {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.🔥:nth-child(26):after {
-webkit-transform: rotateX(180deg) translate(150px) scaleX(0.5);
transform: rotateX(180deg) translate(150px) scaleX(0.5);
border-color: #9500ff;
}
.🔥:nth-child(27) {
-webkit-animation-delay: -1.04s;
animation-delay: -1.04s;
}
.🔥:nth-child(27):after {
-webkit-transform: rotateX(187.2deg) translate(156px) scaleX(0.52);
transform: rotateX(187.2deg) translate(156px) scaleX(0.52);
border-color: #9900ff;
}
.🔥:nth-child(28) {
-webkit-animation-delay: -1.08s;
animation-delay: -1.08s;
}
.🔥:nth-child(28):after {
-webkit-transform: rotateX(194.4deg) translate(162px) scaleX(0.54);
transform: rotateX(194.4deg) translate(162px) scaleX(0.54);
border-color: #9d00ff;
}
.🔥:nth-child(29) {
-webkit-animation-delay: -1.12s;
animation-delay: -1.12s;
}
.🔥:nth-child(29):after {
-webkit-transform: rotateX(201.6deg) translate(168px) scaleX(0.56);
transform: rotateX(201.6deg) translate(168px) scaleX(0.56);
border-color: #a200ff;
}
.🔥:nth-child(30) {
-webkit-animation-delay: -1.16s;
animation-delay: -1.16s;
}
.🔥:nth-child(30):after {
-webkit-transform: rotateX(208.8deg) translate(174px) scaleX(0.58);
transform: rotateX(208.8deg) translate(174px) scaleX(0.58);
border-color: #a600ff;
}
.🔥:nth-child(31) {
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.🔥:nth-child(31):after {
-webkit-transform: rotateX(216deg) translate(180px) scaleX(0.6);
transform: rotateX(216deg) translate(180px) scaleX(0.6);
border-color: #aa00ff;
}
.🔥:nth-child(32) {
-webkit-animation-delay: -1.24s;
animation-delay: -1.24s;
}
.🔥:nth-child(32):after {
-webkit-transform: rotateX(223.2deg) translate(186px) scaleX(0.62);
transform: rotateX(223.2deg) translate(186px) scaleX(0.62);
border-color: #ae00ff;
}
.🔥:nth-child(33) {
-webkit-animation-delay: -1.28s;
animation-delay: -1.28s;
}
.🔥:nth-child(33):after {
-webkit-transform: rotateX(230.4deg) translate(192px) scaleX(0.64);
transform: rotateX(230.4deg) translate(192px) scaleX(0.64);
border-color: #b300ff;
}
.🔥:nth-child(34) {
-webkit-animation-delay: -1.32s;
animation-delay: -1.32s;
}
.🔥:nth-child(34):after {
-webkit-transform: rotateX(237.6deg) translate(198px) scaleX(0.66);
transform: rotateX(237.6deg) translate(198px) scaleX(0.66);
border-color: #b700ff;
}
.🔥:nth-child(35) {
-webkit-animation-delay: -1.36s;
animation-delay: -1.36s;
}
.🔥:nth-child(35):after {
-webkit-transform: rotateX(244.8deg) translate(204px) scaleX(0.68);
transform: rotateX(244.8deg) translate(204px) scaleX(0.68);
border-color: #bb00ff;
}
.🔥:nth-child(36) {
-webkit-animation-delay: -1.4s;
animation-delay: -1.4s;
}
.🔥:nth-child(36):after {
-webkit-transform: rotateX(252deg) translate(210px) scaleX(0.7);
transform: rotateX(252deg) translate(210px) scaleX(0.7);
border-color: #bf00ff;
}
.🔥:nth-child(37) {
-webkit-animation-delay: -1.44s;
animation-delay: -1.44s;
}
.🔥:nth-child(37):after {
-webkit-transform: rotateX(259.2deg) translate(216px) scaleX(0.72);
transform: rotateX(259.2deg) translate(216px) scaleX(0.72);
border-color: #c400ff;
}
.🔥:nth-child(38) {
-webkit-animation-delay: -1.48s;
animation-delay: -1.48s;
}
.🔥:nth-child(38):after {
-webkit-transform: rotateX(266.4deg) translate(222px) scaleX(0.74);
transform: rotateX(266.4deg) translate(222px) scaleX(0.74);
border-color: #c800ff;
}
.🔥:nth-child(39) {
-webkit-animation-delay: -1.52s;
animation-delay: -1.52s;
}
.🔥:nth-child(39):after {
-webkit-transform: rotateX(273.6deg) translate(228px) scaleX(0.76);
transform: rotateX(273.6deg) translate(228px) scaleX(0.76);
border-color: #cc00ff;
}
.🔥:nth-child(40) {
-webkit-animation-delay: -1.56s;
animation-delay: -1.56s;
}
.🔥:nth-child(40):after {
-webkit-transform: rotateX(280.8deg) translate(234px) scaleX(0.78);
transform: rotateX(280.8deg) translate(234px) scaleX(0.78);
border-color: #d000ff;
}
.🔥:nth-child(41) {
-webkit-animation-delay: -1.6s;
animation-delay: -1.6s;
}
.🔥:nth-child(41):after {
-webkit-transform: rotateX(288deg) translate(240px) scaleX(0.8);
transform: rotateX(288deg) translate(240px) scaleX(0.8);
border-color: #d500ff;
}
.🔥:nth-child(42) {
-webkit-animation-delay: -1.64s;
animation-delay: -1.64s;
}
.🔥:nth-child(42):after {
-webkit-transform: rotateX(295.2deg) translate(246px) scaleX(0.82);
transform: rotateX(295.2deg) translate(246px) scaleX(0.82);
border-color: #d900ff;
}
.🔥:nth-child(43) {
-webkit-animation-delay: -1.68s;
animation-de.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0