css实现时空穿梭粒子线条动画动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现时空穿梭粒子线条动画动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
height: 100vh;
width: 100vw;
background: #390946;
background: radial-gradient(circle, #390946 0%, #38125b 8%, #14001d 36%, black 100%);
overflow: hidden;
}
.container {
position: fixed;
top: 50%;
left: 50%;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*rotation can be added for additional affect
animation: rotation 15s linear infinite;*/
}
.wrapper {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
-webkit-perspective: 25px;
perspective: 25px;
}
.hole {
position: relative;
width: 500px;
height: 500px;
border-radius: 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-150px);
transform: translateZ(-150px);
background: transparent;
}
.space-bottom {
position: absolute;
width: 500px;
height: 500px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
background: transparent;
z-index: 2;
-webkit-transform: rotateX(-80deg) translateZ(250px);
transform: rotateX(-80deg) translateZ(250px);
}
.space-top {
position: absolute;
width: 500px;
height: 500px;
background: transparent;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
-webkit-transform: rotateX(80deg) translateZ(250px);
transform: rotateX(80deg) translateZ(250px);
}
.space-left {
position: absolute;
width: 500px;
height: 500px;
border: solid 0px;
border-radius: 50%;
-webkit-transform: rotateY(-80deg) translateZ(250px);
transform: rotateY(-80deg) translateZ(250px);
}
.space-right {
position: absolute;
width: 500px;
height: 500px;
border: solid 0px;
border-radius: 50%;
-webkit-transform: rotateY(80deg) translateZ(250px);
transform: rotateY(80deg) translateZ(250px);
}
.star-top {
position: absolute;
left: 0px;
width: 1px;
height: 20px;
opacity: 0;
border-radius: 50%;
background: #5729ff;
box-shadow: 0 0 2px 1px purple;
-webkit-animation: stars 1.25s linear infinite;
animation: stars 1.25s linear infinite;
}
.star-top:nth-child(1) {
top: calc(50% - -74px);
left: calc(80% - 269px);
-webkit-animation-delay: 1567ms;
animation-delay: 1567ms;
}
.star-top:nth-child(2) {
top: calc(50% - 159px);
left: calc(80% - 71px);
-webkit-animation-delay: 785ms;
animation-delay: 785ms;
}
.star-top:nth-child(3) {
top: calc(50% - 36px);
left: calc(80% - 261px);
-webkit-animation-delay: 1066ms;
animation-delay: 1066ms;
}
.star-top:nth-child(4) {
top: calc(50% - 26px);
left: calc(80% - 228px);
-webkit-animation-delay: 2066ms;
animation-delay: 2066ms;
}
.star-top:nth-child(5) {
top: calc(50% - -36px);
left: calc(80% - 67px);
-webkit-animation-delay: 4435ms;
animation-delay: 4435ms;
}
.star-top:nth-child(6) {
top: calc(50% - -154px);
left: calc(80% - 7px);
-webkit-animation-delay: 2636ms;
animation-delay: 2636ms;
}
.star-top:nth-child(7) {
top: calc(50% - 134px);
left: calc(80% - 197px);
-webkit-animation-delay: 334ms;
animation-delay: 334ms;
}
.star-top:nth-child(8) {
top: calc(50% - 38px);
left: calc(80% - 33px);
-webkit-animation-delay: 2764ms;
animation-delay: 2764ms;
}
.star-top:nth-child(9) {
top: calc(50% - -15px);
left: calc(80% - 60px);
-webkit-animation-delay: 4395ms;
animation-delay: 4395ms;
}
.star-top:nth-child(10) {
top: calc(50% - -62px);
left: calc(80% - 135px);
-webkit-animation-delay: 3587ms;
animation-delay: 3587ms;
}
.star-top:nth-child(11) {
top: calc(50% - -10px);
left: calc(80% - 201px);
-webkit-animation-delay: 2691ms;
animation-delay: 2691ms;
}
.star-top:nth-child(12) {
top: calc(50% - -156px);
left: calc(80% - 144px);
-webkit-animation-delay: 3475ms;
animation-delay: 3475ms;
}
.star-top:nth-child(13) {
top: calc(50% - 126px);
left: calc(80% - 44px);
-webkit-animation-delay: 4482ms;
animation-delay: 4482ms;
}
.star-top:nth-child(14) {
top: calc(50% - 98px);
left: calc(80% - 117px);
-webkit-animation-delay: 753ms;
animation-delay: 753ms;
}
.star-top:nth-child(15) {
top: calc(50% - -5px);
left: calc(80% - 3px);
-webkit-animation-delay: 3158ms;
animation-delay: 3158ms;
}
.star-top:nth-child(16) {
top: calc(50% - 184px);
left: calc(80% - 182px);
-webkit-animation-delay: 1222ms;
animation-delay: 1222ms;
}
.star-top:nth-child(17) {
top: calc(50% - 138px);
left: calc(80% - 137px);
-webkit-animation-delay: 1820ms;
animation-delay: 1820ms;
}
.star-top:nth-child(18) {
top: calc(50% - -7px);
left: calc(80% - 66px);
-webkit-animation-delay: 4875ms;
animation-delay: 4875ms;
}
.star-top:nth-child(19) {
top: calc(50% - 164px);
left: calc(80% - 258px);
-webkit-animation-delay: 2702ms;
animation-delay: 2702ms;
}
.star-top:nth-child(20) {
top: calc(50% - 132px);
left: calc(80% - 180px);
-webkit-animation-delay: 436ms;
animation-delay: 436ms;
}
.star-top:nth-child(21) {
top: calc(50% - -109px);
left: calc(80% - 228px);
-webkit-animation-delay: 920ms;
animation-delay: 920ms;
}
.star-top:nth-child(22) {
top: calc(50% - 13px);
left: calc(80% - 283px);
-webkit-animation-delay: 1331ms;
animation-delay: 1331ms;
}
.star-top:nth-child(23) {
top: calc(50% - -95px);
left: calc(80% - 18px);
-webkit-animation-delay: 3240ms;
animation-delay: 3240ms;
}
.star-top:nth-child(24) {
top: calc(50% - -4px);
left: calc(80% - 27px);
-webkit-animation-delay: 3664ms;
animation-delay: 3664ms;
}
.star-top:nth-child(25) {
top: calc(50% - 124px);
left: calc(80% - 70px);
-webkit-animation-delay: 4853ms;
animation-delay: 4853ms;
}
.star-top:nth-child(26) {
top: calc(50% - 190px);
left: calc(80% - 246px);
-webkit-animation-delay: 4660ms;
animation-delay: 4660ms;
}
.star-top:nth-child(27) {
top: calc(50% - -65px);
left: calc(80% - 80px);
-webkit-animation-delay: 4686ms;
animation-delay: 4686ms;
}
.star-top:nth-child(28) {
top: calc(50% - -110px);
left: calc(80% - 189px);
-webkit-animation-delay: 776ms;
animation-delay: 776ms;
}
.star-top:nth-child(29) {
top: calc(50% - 152px);
left: calc(80% - 165px);
-webkit-animation-delay: 405ms;
animation-delay: 405ms;
}
.star-top:nth-child(30) {
top: calc(50% - -137px);
left: calc(80% - 159px);
-webkit-animation-delay: 1841ms;
animation-delay: 1841ms;
}
.star-bottom {
position: absolute;
left: 0px;
width: 1px;
height: 20px;
opacity: 0;
border-radius: 50%;
background: #5729ff;
box-shadow: 0 0 2px 1px purple;
animation: stars 1.25s linear infinite reverse;
}
.star-bottom:nth-child(1) {
top: calc(20% - -42px);
left: calc(80% - 219px);
-webkit-animation-delay: 3383ms;
animation-delay: 3383ms;
}
.star-bottom:nth-child(2) {
top: calc(20% - -182px);
left: calc(80% - 261px);
-webkit-animation-delay: 4439ms;
animation-delay: 4439ms;
}
.star-bottom:nth-child(3) {
top: calc(20% - 113px);
left: calc(80% - 140px);
-webkit-animation-delay: 3266ms;
animation-delay: 3266ms;
}
.star-bottom:nth-child(4) {
top: calc(20% - -25px);
left: calc(80% - 2px);
-webkit-animation-delay: 3766ms;
animation-delay: 3766ms;
}
.star-bottom:nth-child(5) {
top: calc(20% - 124px);
left: calc(80% - 150px);
-webkit-animation-delay: 517ms;
animation-delay: 517ms;
}
.star-bottom:nth-child(6) {
top: calc(20% - -189px);
left: calc(80% - 204px);
-webkit-animation-delay: 3156ms;
animation-delay: 3156ms;
}
.star-bottom:nth-child(7) {
top: calc(20% - -178px);
left: calc(80% - 82px);
-webkit-animation-delay: 9ms;
animation-delay: 9ms;
}
.star-bottom:nth-child(8) {
top: calc(20% - 80px);
left: calc(80% - 145px);
-webkit-animation-delay: 1513ms;
animation-delay: 1513ms;
}
.star-bottom:nth-child(9) {
top: calc(20% - -23px);
left: calc(80% - 35px);
-webkit-animation-delay: 4733ms;
animation-delay: 4733ms;
}
.star-bottom:nth-child(10) {
top: calc(20% - -172px);
left: calc(80% - 107px);
-webkit-animation-delay: 2072ms;
animation-delay: 2072ms;
}
.star-bottom:nth-child(11) {
top: calc(20% - 150px);
left: calc(80% - 107px);
-webkit-animation-delay: 2607ms;
animation-delay: 2607ms;
}
.star-bottom:nth-child(12) {
top: calc(20% - 13px);
left: calc(80% - 187px);
-webkit-animation-delay: 1278ms;
animation-delay: 1278ms;
}
.star-bottom:nth-child(13) {
top: calc(20% - 104px);
left: calc(80% - 124px);
-webkit-animation-delay: 3387ms;
animation-delay: 3387ms;
}
.star-bottom:nth-child(14) {
top: calc(20% - -11px);
left: calc(80% - 265px);
-webkit-animation-delay: 1345ms;
animation-delay: 1345ms;
}
.star-bottom:nth-child(15) {
top: calc(20% - 127px);
left: calc(80% - 196px);
-webkit-animation-delay: 3697ms;
animation-delay: 3697ms;
}
.star-bottom:nth-child(16) {
top: calc(20% - 31px);
left: calc(80% - 92px);
-webkit-animation-delay: 2666ms;
animation-delay: 2666ms;
}
.star-bottom:nth-child(17) {
top: calc(20% - 34px);
left: calc(80% - 245px);
-webkit-animation-delay: 3804ms;
animation-delay: 3804ms;
}
.star-bottom:nth-child(18) {
top: calc(20% - 173px);
left: calc(80% - 166px);
-webkit-animation-delay: 180ms;
animation-delay: 180ms;
}
.star-bottom:nth-child(19) {
top: calc(20% - 75px);
left: calc(80% - 92px);
-webkit-animation-delay: 3587ms;
animation-delay: 3587ms;
}
.star-bottom:nth-child(20) {
top: calc(20% - 51px);
left: calc(80% - 256px);
-webkit-animation-delay: 2969ms;
animation-delay: 2969ms;
}
.star-bottom:nth-child(21) {
top: calc(20% - -130px);
left: calc(80% - 221px);
-webkit-animation-delay: 3727ms;
animation-delay: 3727ms;
}
.star-bottom:nth-child(22) {
top: calc(20% - -130px);
left: calc(80% - 134px);
-webkit-animation-delay: 2206ms;
animation-delay: 2206ms;
}
.star-bottom:nth-child(23) {
top: calc(20% - 171px);
left: calc(80% - 180px);
-webkit-animation-delay: 3456ms;
animation-delay: 3456ms;
}
.star-bottom:nth-child(24) {
top: calc(20% - -83px);
left: calc(80% - 170px);
-webkit-animation-delay: 2266ms;
animation-delay: 2266ms;
}
.star-bottom:nth-child(25) {
top: calc(20% - -167px);
left: calc(80% - 286px);
-webkit-animation-delay: 2210ms;
animation-delay: 2210ms;
}
.star-bottom:nth-child(26) {
top: calc(20% - -112px);
left: calc(80% - 276px);
-webkit-animation-delay: 2689ms;
animation-delay: 2689ms;
}
.star-bottom:nth-child(27) {
top: calc(20% - -48px);
left: calc(80% - 164px);
-webkit-animation-delay: 1130ms;
animation-delay: 1130ms;
}
.star-bottom:nth-child(28) {
top: calc(20% - -142px);
left: calc(80% - 262px);
-webkit-animation-delay: 1522ms;
animation-delay: 1522ms;
}
.star-bottom:nth-child(29) {
top: calc(20% - -36px);
left: calc(80% - 75px);
-webkit-animation-delay: 2481ms;
animation-delay: 2481ms;
}
.star-bottom:nth-child(30) {
top: calc(20% - 132px);
left: calc(80% - 205px);
-webkit-animation-delay: 2399ms;
animation-delay: 2399ms;
}
.star-left {
position: absolute;
width: 20px;
height: 1px;
opacity: 0;
border-radius: 50%;
background: #5729ff;
box-shadow: 0 0 2px 1px purple;
animation: stars2 1.25s linear infinite reverse;
}
.star-left:nth-child(1) {
top: calc(50% - 135px);
left: calc(100% - 37px);
-webkit-animation-delay: 459ms;
animation-delay: 459ms;
}
.star-left:nth-child(2) {
top: calc(50% - -110px);
left: calc(100% - 168px);
-webkit-animation-delay: 1279ms;
animation-delay: 1279ms;
}
.star-left:nth-child(3) {
top: calc(50% - -85px);
left: calc(100% - 18px);
-webkit-animation-delay: 2683ms;
animation-delay: 2683ms;
}
.star-left:nth-child(4) {
top: calc(50% - 130px);
left: calc(100% - 124px);
-webkit-animation-delay: 3094ms;
animation-delay: 3094ms;
}
.star-left:nth-child(5) {
top: calc(50% - 174px);
left: calc(100% - 174px);
-webkit-animation-delay: 1944ms;
animation-delay: 1944ms;
}
.star-left:nth-child(6) {
top: calc(50% - 8px);
left: calc(100% - 129px);
-webkit-animation-delay: 340ms;
animation-delay: 340ms;
}
.star-left:nth-child(7) {
top: calc(50% - 37px);
left: calc(100% - 160px);
-webkit-animation-delay: 584ms;
animation-delay: 584ms;
}
.star-left:nth-child(8) {
top: calc(50% - 135px);
left: calc(100% - 116px);
-webkit-animation-delay: 2840ms;
animation-delay: 2840ms;
}
.star-left:nth-child(9) {
top: calc(50% - 186px);
left: calc(100% - 8px);
-webkit-animation-delay: 1848ms;
animation-delay: 1848ms;
}
.star-left:nth-child(10) {
top: calc(50% - -11px);
left: calc(100% - 88px);
-webkit-animation-delay: 3477ms;
animation-delay: 3477ms;
}
.star-left:nth-child(11) {
top: calc(50% - 114px);
left: calc(100% - 190px);
-webkit-animation-delay: 4322ms;
animation-delay: 4322ms;
}
.star-left:nth-child(12) {
top: calc(50% - -154px);
left: calc(100% - 49px);
-webkit-animation-delay: 3585ms;
animation-delay: 3585ms;
}
.star-left:nth-child(13) {
top: calc(50% - 163px);
left: calc(100% - 9px);
-webkit-animation-delay: 3809ms;
animation-delay: 3809ms;
}
.star-left:nth-child(14) {
top: calc(50% - 73px);
left: calc(100% - 118px);
-webkit-animation-delay: 2320ms;
animation-delay: 2320ms;
}
.star-left:nth-child(15) {
top: calc(50% - 42px);
left: calc(100% - 7px);
-webkit-animation-delay: 4810ms;
animation-delay: 4810ms;
}
.star-left:nth-child(16) {
top: calc(50% - 185px);
left: calc(100% - 103px);
-webkit-animation-delay: 905ms;
animation-delay: 905ms;
}
.star-left:nth-child(17) {
top: calc(50% - -128px);
left: calc(100% - 100px);
-webkit-animation-delay: 1710ms;
animation-delay: 1710ms;
}
.star-left:nth-child(18) {
top: calc(50% - 60px);
left: calc(100% - 173px);
-webkit-animation-delay: 2301ms;
animation-delay: 2301ms;
}
.star-left:nth-child(19) {
top: calc(50% - 115px);
left: calc(100% - 56px);
-webkit-animation-delay: 3430ms;
animation-delay: 3430ms;
}
.star-left:nth-child(20) {
top: calc(50% - 134px);
left: calc(100% - 145px);
-webkit-animation-delay: 943ms;
animation-delay: 943ms;
}
.star-left:nth-child(21) {
top: calc(50% - 53px);
left: calc(100% - 94px);
-webkit-animation-delay: 4412ms;
animation-delay: 4412ms;
}
.star-left:nth-child(22) {
top: calc(50% - 60px);
left: calc(100% - 51px);
-webkit-animation-delay: 505ms;
animation-delay: 505ms;
}
.star-left:nth-child(23) {
top: calc(50% - 143px);
left: calc(100% - 105px);
-webkit-animation-delay: 4259ms;
animation-delay: 4259ms;
}
.star-left:nth-child(24) {
top: calc(50% - -52px);
left: calc(100% - 50px);
-webkit-animation-delay: 4043ms;
animation-delay: 4043ms;
}
.star-left:nth-child(25) {
top: calc(50% - 133px);
left: calc(100% - 58px);
-webkit-animation-delay: 2332ms;
animation-delay: 2332ms;
}
.star-left:nth-child(26) {
top: calc(50% - 92px);
left: calc(100% - 113px);
-webkit-animation-delay: 1866ms;
animation-delay: 1866ms;
}
.star-left:nth-child(27) {
top: calc(50% - 132px);
left: calc(100% - 113px);
-webkit-animation-delay: 3158ms;
animation-delay: 3158ms;
}
.star-left:nth-child(28) {
top: calc(50% - -64px);
left: calc(100% - 129px);
-webkit-animation-delay: 1106ms;
animation-delay: 1106ms;
}
.star-left:nth-child(29) {
top: calc(50% - 34px);
left: calc(100% - 77px);
-webkit-animation-delay: 2650ms;
animation-delay: 2650ms;
}
.star-left:nth-child(30) {
top: calc(50% - -116px);
left: calc(100% - 189px);
-webkit-animation-delay: 4184ms;
animation-delay: 4184ms;
}
.star-right {
position: absolute;
top: 0px;
width: 20px;
height: 1px;
opacity: 0;
border-radius: 50%;
background: #5729ff;
box-shadow: 0 0 2px 1px purple;
-webkit-animation: stars2 1.25s linear infinite;
animation: stars2 1.25s linear infinite;
}
.star-right:nth-child(1) {
top: calc(50% - -72px);
left: calc(90% - 3px);
-webkit-animation-delay: 3020ms;
animation-delay: 3020ms;
}
.star-right:nth-child(2) {
top: calc(50% - -9px);
left: calc(90% - 142px);
-webkit-animation-delay: 4491ms;
animation-delay: 4491ms;
}
.star-right:nth-child(3) {
top: calc(50% - -66px);
left: calc(90% - 129px);
-webkit-animation-delay: 2087ms;
animation-delay: 2087ms;
}
.star-right:nth-child(4) {
top: calc(50% - -1px);
left: calc(90% - 143px);
-webkit-animation-delay: 2157ms;
animation-delay: 2157ms;
}
.star-right:nth-child(5) {
top: calc(50% - -78px);
left: calc(90% - 3px);
-webkit-animation-delay: 2379ms;
animation-delay: 2379ms;
}
.star-right:nth-child(6) {
top: calc(50% - 148px);
left: calc(90% - 33px);
-webkit-animation-delay: 265ms;
animation-delay: 265ms;
}
.star-right:nth-child(7) {
top: calc(50% - 91px);
left: calc(90% - 226px);
-webkit-animation-delay: 3438ms;
animation-delay: 3438ms;
}
.star-right:nth-child(8) {
top: calc(50% - 70px);
left: calc(90% - 117px);
-webkit-animation-delay: 683ms;
animation-delay: 683ms;
}
.star-right:nth-child(9) {
top: calc(50% - 76px);
left: calc(90% - 287px);
-webkit-animation-delay: 515ms;
animation-delay: 515ms;
}
.star-right:nth-child(10) {
top: calc(50% - 7px);
left: calc(90% - 127px);
-webkit-animation-delay: 855ms;
animation-delay: 855ms;
}
.star-right:nth-child(11) {
top: calc(50% - 31px);
left: calc(90% - 286px);
-webkit-animation-delay: 1605ms;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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