纯css实现时间机器穿梭时间效果-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：纯css实现时间机器穿梭时间效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css?family=Lato:700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
* {
  font-family: Lato, Helvetica, sans-serif;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  perspective: 800px;
  overflow: hidden;
  background: radial-gradient(circle at 100% 0, hotpink, rebeccapurple 40%, midnightblue);
}

.stars {
  width: 2px;
  height: 2px;
  box-shadow: 334px 484px #fff , 1959px 20px #fff , 320px 1055px #fff , 1459px 1028px #fff , 733px 1982px #fff , 1992px 971px #fff , 1246px 1604px #fff , 99px 1283px #fff , 1114px 13px #fff , 954px 335px #fff , 40px 959px #fff , 1145px 868px #fff , 1348px 342px #fff , 52px 1775px #fff , 1645px 530px #fff , 1451px 1732px #fff , 986px 267px #fff , 1071px 360px #fff , 893px 357px #fff , 1095px 1076px #fff , 1330px 962px #fff , 531px 1849px #fff , 120px 1090px #fff , 1404px 580px #fff , 793px 1251px #fff , 674px 247px #fff , 59px 863px #fff , 858px 1596px #fff , 1357px 537px #fff , 1802px 1291px #fff , 1114px 1240px #fff , 92px 63px #fff , 463px 420px #fff , 94px 384px #fff , 1458px 1334px #fff , 1428px 1047px #fff , 1125px 546px #fff , 871px 501px #fff , 80px 615px #fff , 700px 1271px #fff , 1839px 1464px #fff , 1020px 984px #fff , 979px 1817px #fff , 709px 1393px #fff , 12px 1011px #fff , 865px 1883px #fff , 1507px 278px #fff , 7px 97px #fff , 300px 1165px #fff , 183px 1941px #fff , 1737px 1365px #fff , 555px 1876px #fff , 188px 75px #fff , 1326px 1078px #fff , 1813px 836px #fff , 387px 1841px #fff , 1560px 1415px #fff , 1983px 1629px #fff , 1799px 1585px #fff , 185px 514px #fff , 564px 650px #fff , 349px 818px #fff , 1386px 1764px #fff , 1481px 1435px #fff , 11px 482px #fff , 1976px 1070px #fff , 796px 157px #fff , 257px 3px #fff , 1205px 1818px #fff , 1729px 874px #fff , 680px 1940px #fff , 872px 435px #fff , 135px 200px #fff , 1684px 1838px #fff , 1566px 1274px #fff , 821px 612px #fff , 343px 1882px #fff , 1902px 949px #fff , 1098px 1167px #fff , 1977px 676px #fff , 55px 41px #fff , 1877px 699px #fff , 140px 774px #fff , 690px 543px #fff , 931px 663px #fff , 1125px 976px #fff , 1661px 302px #fff , 1826px 542px #fff , 590px 655px #fff , 1259px 1521px #fff , 1814px 318px #fff , 8px 1124px #fff , 250px 351px #fff , 920px 885px #fff , 136px 1295px #fff , 779px 1917px #fff , 1577px 35px #fff , 1643px 1076px #fff , 1959px 343px #fff , 1292px 1419px #fff , 505px 87px #fff , 430px 1011px #fff , 254px 85px #fff , 790px 478px #fff , 1771px 418px #fff , 401px 1993px #fff , 1694px 374px #fff , 1979px 500px #fff , 1775px 845px #fff , 1364px 1691px #fff , 138px 813px #fff , 1274px 410px #fff , 89px 1703px #fff , 1932px 1772px #fff , 1122px 597px #fff , 1426px 1060px #fff , 182px 158px #fff , 776px 969px #fff , 615px 163px #fff , 1361px 888px #fff , 769px 13px #fff , 1490px 614px #fff , 1929px 1230px #fff , 150px 1077px #fff , 1465px 1240px #fff , 85px 1724px #fff , 76px 1853px #fff , 407px 1603px #fff , 320px 1163px #fff , 1361px 1175px #fff , 1383px 477px #fff , 1274px 1776px #fff , 1921px 1629px #fff , 713px 426px #fff , 733px 1512px #fff , 390px 371px #fff , 694px 1199px #fff , 1223px 130px #fff , 953px 1100px #fff , 380px 292px #fff , 1097px 1557px #fff , 573px 417px #fff , 425px 1673px #fff , 1875px 1915px #fff , 241px 1190px #fff , 1127px 45px #fff , 33px 27px #fff , 1078px 1711px #fff , 1001px 1395px #fff , 1359px 550px #fff , 611px 36px #fff , 1708px 1024px #fff , 905px 1780px #fff , 969px 1825px #fff , 47px 1879px #fff , 1746px 124px #fff , 1057px 91px #fff , 1757px 978px #fff , 1102px 1794px #fff , 1547px 831px #fff , 512px 1910px #fff , 1472px 1713px #fff , 120px 859px #fff , 1196px 1127px #fff , 907px 1183px #fff , 1940px 1557px #fff , 1833px 1708px #fff , 598px 358px #fff , 1782px 1319px #fff , 1473px 207px #fff , 24px 1538px #fff , 743px 659px #fff , 1802px 1321px #fff , 1461px 698px #fff , 160px 459px #fff , 484px 411px #fff , 1885px 1644px #fff , 1043px 1100px #fff , 155px 1998px #fff , 292px 922px #fff , 1863px 379px #fff , 1644px 809px #fff , 499px 655px #fff , 1494px 1976px #fff , 716px 407px #fff , 1548px 226px #fff , 1009px 1744px #fff , 747px 580px #fff , 1322px 1693px #fff , 1702px 349px #fff , 629px 192px #fff , 386px 1496px #fff , 1640px 506px #fff , 723px 385px #fff , 13px 187px #fff , 771px 978px #fff , 1656px 903px #fff , 1795px 178px #fff , 75px 968px #fff , 1210px 1350px #fff;
  border-radius: 100%;
  animation: animate-stars 150s infinite;
}
.stars::before, .stars::after {
  content: '';
  position: absolute;
  box-shadow: 1142px 1865px #fff , 180px 215px #fff , 334px 1742px #fff , 711px 1261px #fff , 1821px 1279px #fff , 689px 1760px #fff , 919px 797px #fff , 1569px 507px #fff , 1306px 572px #fff , 1524px 1544px #fff , 800px 1849px #fff , 1266px 517px #fff , 283px 952px #fff , 1687px 1112px #fff , 1981px 158px #fff , 1297px 468px #fff , 284px 407px #fff , 305px 528px #fff , 1940px 423px #fff , 358px 126px #fff , 748px 1100px #fff , 1035px 299px #fff , 551px 582px #fff , 1641px 118px #fff , 740px 926px #fff , 920px 204px #fff , 1412px 698px #fff , 1661px 1748px #fff , 1100px 1280px #fff , 660px 1766px #fff , 729px 1558px #fff , 666px 234px #fff , 1101px 563px #fff , 1236px 151px #fff , 1061px 1814px #fff , 1543px 286px #fff , 1416px 229px #fff , 1811px 453px #fff , 504px 755px #fff , 1814px 1060px #fff , 1237px 1081px #fff , 1889px 1993px #fff , 823px 1141px #fff , 277px 431px #fff , 1687px 839px #fff , 1px 1612px #fff , 1049px 1883px #fff , 465px 1322px #fff , 1034px 883px #fff , 209px 287px #fff , 1846px 294px #fff , 1087px 1376px #fff , 1701px 570px #fff , 1143px 817px #fff , 1098px 22px #fff , 1500px 890px #fff , 1817px 92px #fff , 142px 718px #fff , 300px 495px #fff , 1281px 880px #fff , 1805px 128px #fff , 1017px 896px #fff , 802px 399px #fff , 347px 1696px #fff , 1518px 731px #fff , 840px 1586px #fff , 1564px 1555px #fff , 813px 1320px #fff , 1805px 238px #fff , 857px 1549px #fff , 1429px 1799px #fff , 1632px 1842px #fff , 601px 970px #fff , 696px 1843px #fff , 719px 521px #fff , 64px 1668px #fff , 1136px 546px #fff , 1715px 246px #fff , 639px 525px #fff , 1880px 163px #fff , 1892px 1464px #fff , 791px 637px #fff , 1165px 20px #fff , 1508px 1029px #fff , 44px 1745px #fff , 1718px 191px #fff , 1991px 1985px #fff , 290px 933px #fff , 1359px 299px #fff , 1596px 1771px #fff , 1834px 1405px #fff , 1926px 1160px #fff , 1103px 1541px #fff , 784px 1737px #fff , 1931px 1594px #fff , 959px 1175px #fff , 353px 1393px #fff , 77px 543px #fff , 676px 1893px #fff , 527px 676px #fff , 1755px 386px #fff , 1743px 360px #fff , 1071px 113px #fff , 341px 370px #fff , 463px 1891px #fff , 801px 1259px #fff , 812px 618px #fff , 1658px 985px #fff , 653px 145px #fff , 1081px 1807px #fff , 688px 705px #fff , 1338px 1515px #fff , 1786px 1510px #fff , 1055px 314px #fff , 1357px 616px #fff , 1293px 70px #fff , 523px 1405px #fff , 1538px 1082px #fff , 63px 197px #fff , 642px 846px #fff , 1699px 1729px #fff , 901px 319px #fff , 695px 1939px #fff , 701px 987px #fff , 592px 968px #fff , 1550px 829px #fff , 1025px 632px #fff , 1272px 1429px #fff , 714px 108px #fff , 1568px 1594px #fff , 900px 646px #fff , 1226px 1293px #fff , 354px 1397px #fff , 883px 115px #fff , 1790px 1881px #fff , 1646px 1552px #fff , 1153px 591px #fff , 1258px 281px #fff , 1948px 521px #fff , 811px 856px #fff , 471px 1997px #fff , 736px 122px #fff , 1022px 286px #fff , 710px 431px #fff , 739px 1615px #fff , 714px 547px #fff , 1541px 467px #fff , 1268px 326px #fff , 769px 1740px #fff , 752px 1388px #fff , 53px 1528px #fff , 25px 1662px #fff , 1656px 1090px #fff , 516px 1086px #fff , 481px 180px #fff , 67px 893px #fff , 511px 1308px #fff , 1249px 1481px #fff , 1073px 842px #fff , 1229px 1248px #fff , 1363px 179px #fff , 1660px 1212px #fff , 61px 697px #fff , 411px 769px #fff , 479px 248px #fff , 105px 1957px #fff , 690px 973px #fff , 190px 571px #fff , 493px 915px #fff , 1912px 678px #fff , 1407px 775px #fff , 1722px 1925px #fff , 707px 756px #fff , 1341px 1708px #fff , 357px 987px #fff , 12px 823px #fff , 133px 603px #fff , 813px 811px #fff , 1748px 1794px #fff , 1772px 325px #fff , 321px 1539px #fff , 1691px 993px #fff , 543px 615px #fff , 1666px 730px #fff , 829px 792px #fff , 1929px 1302px #fff , 399px 1957px #fff , 783px 208px #fff , 293px 1307px #fff , 370px 151px #fff , 1696px 949px #fff , 1827px 635px #fff , 1534px 44px #fff , 1732px 59px #fff , 1991px 849px #fff , 1652px 1399px #fff , 1557px 1063px #fff , 1827px 1422px #fff , 1303px 969px #fff , 1866px 1529px #fff , 357px 1418px #fff , 1282px 1377px #fff , 456px 1894px #fff , 977px 288px #fff , 1614px 1432px #fff , 1636px 1503px #fff , 1023px 107px #fff , 591px 1831px #fff , 1100px 1470px #fff , 1871px 914px #fff , 1764px 236px #fff , 1283px 1987px #fff , 1227px 1417px #fff , 1173px 968px #fff , 1174px 1527px #fff , 383px 352px #fff , 228px 1428px #fff , 1981px 394px #fff , 1273px 341px #fff , 404px 2px #fff , 1365px 29px #fff , 1721px 10px #fff , 287px 427px #fff , 1558px 857px #fff , 766px 886px #fff , 148px 806px #fff , 1649px 363px #fff , 67px 1428px #fff , 683px 1840px #fff , 1503px 1711px #fff , 603px 491px #fff , 408px 1970px #fff , 903px 929px #fff , 1755px 334px #fff , 1299px 1472px #fff , 1522px 732px #fff , 1498px 260px #fff , 243px 1869px #fff , 155px 803px #fff , 711px 686px #fff , 458px 1842px #fff , 372px 237px #fff , 407px 1996px #fff , 467px 258px #fff , 204px 1660px #fff , 88px 827px #fff , 137px 1105px #fff , 760px 883px #fff , 554px 1948px #fff , 210px 1734px #fff , 530px 959px #fff , 1660px 1337px #fff , 926px 952px #fff , 568px 1751px #fff , 434px 1072px #fff , 1991px 1249px #fff , 1750px 1428px #fff , 1672px 624px #fff , 1816px 1145px #fff , 1177px 1459px #fff , 131px 1126px #fff , 1136px 1822px #fff , 1766px 712px #fff , 148px 1266px #fff , 1522px 1986px #fff , 359px 602px #fff , 1506px 767px #fff , 1941px 765px #fff , 1290px 441px #fff , 759px 859px #fff , 1745px 843px #fff , 94px 1160px #fff , 1948px 483px #fff , 410px 1237px #fff , 552px 879px #fff , 1963px 591px #fff , 1527px 942px #fff , 208px 1134px #fff , 557px 1851px #fff , 538px 410px #fff , 551px 1499px #fff , 945px 1526px #fff , 1323px 984px #fff , 49px 339px #fff , 1214px 294px #fff , 214px 1392px #fff , 1830px 447px #fff , 317px 965px #fff , 629px 1172px #fff , 1219px 1465px #fff , 1509px 897px #fff , 644px 657px #fff , 303px 1414px #fff , 233px 265px #fff , 635px 1703px #fff , 485px 1199px #fff , 490px 800px #fff , 1877px 1376px #fff , 1221px 1121px #fff , 1359px 715px #fff , 1675px 1183px #fff , 1389px 1499px #fff , 923px 1975px #fff , 1211px 1722px #fff , 1544px 1292px #fff , 1358px 439px #fff , 868px 1007px #fff , 1840px 1701px #fff , 1895px 503px #fff , 1269px 1467px #fff , 453px 1884px #fff , 1097px 1579px #fff , 227px 832px #fff , 1519px 1769px #fff , 1393px 1017px #fff , 403px 1329px #fff , 1118px 1600px #fff , 1649px 150px #fff , 1858px 638px #fff , 1799px 1482px #fff , 664px 1357px #fff , 1655px 1072px #fff , 443px 1903px #fff , 1757px 1616px #fff , 152px 1453px #fff , 1251px 1927px #fff , 1741px 1998px #fff , 667px 365px #fff , 759px 90px #fff , 399px 1333px #fff , 708px 4px #fff , 811px 1625px #fff , 842px 1070px #fff , 73px 1328px #fff , 1258px 799px #fff , 1938px 1987px #fff , 313px 1406px #fff , 1767px 1161px #fff , 782px 1381px #fff , 92px 229px #fff , 1806px 498px #fff , 997px 657px #fff , 456px 1142px #fff , 1970px 1570px #fff , 1541px 1726px #fff , 1883px 761px #fff , 1978px 1476px #fff , 1934px 819px #fff , 1299px 223px #fff , 1011px 1928px #fff , 182px 1605px #fff , 1424px 1504px #fff , 1319px 5px #fff , 811px 1126px #fff , 1815px 1209px #fff , 945px 718px #fff , 1213px 1851px #fff , 1548px 1280px #fff , 1024px 1643px #fff , 1440px 1476px #fff , 1526px 1299px #fff , 1986px 1916px #fff , 1579px 616px #fff , 70px 1861px #fff , 216px 298px #fff , 1795px 220px #fff , 445px 630px #fff , 1762px 260px #fff , 1574px 957px #fff , 577px 493px #fff , 930px 42px #fff , 872px 1114px #fff , 348px 814px #fff , 555px 278px #fff , 1758px 127px #fff , 1116px 621px #fff , 590px 1247px #fff , 908px 1923px #fff , 1219px 1901px #fff , 1011px 811px #fff , 1749px 1822px #fff , 907px 504px #fff , 1764px 347px #fff , 1253px 1912px #fff , 1948px 1785px #fff , 1466px 440px #fff , 791px 903px #fff , 425px 817px #fff , 1052px 1142px #fff , 1325px 757px #fff , 1783px 1257px #fff , 1298px 1554px #fff , 861px 1224px #fff , 101px 1992px #fff , 1975px 478px #fff , 68px 1202px #fff , 60px 579px #fff , 1751px 513px #fff , 1159px 1617px #fff , 405px 1085px #fff , 1423px 1214px #fff , 822px 918px #fff , 1680px 741px #fff , 427px 601px #fff , 73px 1036px #fff , 895px 773px #fff , 218px 1249px #fff , 1667px 1592px #fff , 1698px 747px #fff , 1133px 1689px #fff , 1009px 224px #fff , 404px 764px #fff , 1447px 1243px #fff , 815px 883px #fff , 1618px 1804px #fff , 1885px 830px #fff , 308px 1698px #fff , 1627px 1934px #fff , 294px 1175px #fff , 790px 1804px #fff , 1499px 1855px #fff , 914px 763px #fff , 813px 1960px #fff , 1562px 1459px #fff , 657px 782px #fff , 1999px 262px #fff , 219px 1291px #fff , 1694px 1479px #fff , 1412px 1697px #fff , 323px 695px #fff , 499px 1033px #fff , 312px 1415px #fff , 248px 14px #fff , 1120px 1252px #fff , 397px 1077px #fff , 745px 953px #fff , 1557px 1162px #fff , 663px 1882px #fff , 374px 593px #fff , 1895px 1764px #fff , 745px 1456px #fff , 288px 1718px #fff , 603px 1277px #fff , 1313px 122px #fff , 1351px 1030px #fff , 522px 1691px #fff , 189px 1377px #fff , 722px 1198px #fff , 692px 455px #fff , 1547px 1937px #fff , 933px 1274px #fff , 439px 990px #fff , 656px 1219px #fff , 1590px 138px #fff , 591px 310px #fff , 780px 244px #fff , 968px 478px #fff , 1048px 790px #fff , 1162px 932px #fff , 705px 468px #fff , 1950px 624px #fff , 622px 601px #fff , 356px 776px #fff , 353px 1756px #fff , 1489px 526px #fff , 1804px 1324px #fff , 1911px 1404px #fff , 534px 382px #fff , 1728px 1000px #fff , 1930px 1105px #fff , 1984px 38px #fff , 256px 907px #fff , 1819px 843px #fff , 381px 1791px #fff , 394px 1198px #fff , 53px 972px #fff , 196px 130px #fff , 926px 550px #fff , 1619px 949px #fff , 477px 1415px #fff , 92px 908px #fff , 673px 369px #fff , 1072px 1131px #fff , 954px 113px #fff , 1112px 1225px #fff , 540px 341px #fff , 321px 1029px #fff , 1106px 151px #fff , 316px 1172px #fff , 411px 847px #fff , 1858px 208px #fff , 564px 51px #fff , 650px 438px #fff , 500px 1857px #fff , 598px 615px #fff , 1794px 525px #fff , 639px 1414px #fff , 1724px 994px #fff , 1824px 1448px #fff , 1590px 75px #fff , 498px 1612px #fff , 1339px 972px #fff , 450px 1111px #fff , 5px 1066px #fff , 489px 1937px #fff , 309px 561px #fff , 910px 1600px #fff , 1405px 677px #fff , 230px 1958px #fff , 1198px 895px #fff , 1193px 1703px #fff , 1437px 406px #fff , 1978px 1553px #fff , 1486px 792px #fff , 361px 499px #fff , 1440px 1995px #fff , 5px 281px #fff , 1964px 1114px #fff , 2000px 1020px #fff , 1506px 1212px #fff , 654px 933px #fff , 809px 1763px #fff , 754px 1354px #fff , 875px 407px #fff , 707px 1732px #fff , 1295px 80px #fff , 235px 1498px #fff , 1452px 1247px #fff , 810px 356px #fff , 1136px 1454px #fff , 1495px 1822px #fff , 1201px 515px #fff , 1018px 1061px #fff , 1626px 165px #fff , 1693px 1701px #fff , 86px 383px #fff , 114px 901px #fff , 1207px 388px #fff , 968px 65px #fff , 1777px 1220px #fff , 1631px 674px #fff , 550px 896px #fff , 113px 293px #fff , 1996px 1231px #fff , 1607px 1573px #fff , 1682px 714px #fff , 630px 1669px #fff , 1778px 1707px #fff , 758px 843px #fff , 1139px 40px #fff , 1062px 1784px #fff , 1154px 1660px #fff , 1902px 323px #fff , 657px 3px #fff , 1302px 1649px #fff , 1720px 1396px #fff , 1978px 680px #fff , 1000px 1427px #fff , 1309px 403px #fff , 264px 172px #fff , 1602px 1261px #fff , 858px 1690px #fff , 575px 1653px #fff , 1947px 126px #fff , 1227px 36px #fff , 705px 653px #fff , 1683px 1351px #fff , 914px 1394px #fff , 223px 1842px #fff , 752px 644px #fff , 1070px 1879px #fff , 1695px 844px #fff , 515px 473px #fff , 1006px 353px #fff , 1423px 357px #fff , 8px 1434px #fff , 229px 1174px #fff , 1547px 160px #fff , 982px 909px #fff , 362px 476px #fff , 377px 95px #fff , 445px 1321px #fff , 1999px 1507px #fff , 1387px 285px #fff , 1195px 1952px #fff , 305px 21px #fff , 1704px 1533px #fff , 392px 253px #fff , 1839px 265px #fff , 1916px 1343px #fff , 592px 1051px #fff , 822px 89px #fff , 572px 92px #fff , 837px 1340px #fff , 100px 558px #fff , 1555px 671px #fff , 762px 1204px #fff , 1370px 623px #fff , 151px 620px #fff , 311px 611px #fff , 1139px 1700px #fff , 1664px 1952px #fff , 875px 413px #fff , 1008px 155px #fff , 383px 1639px #fff , 1325px 975px #fff , 642px 650px #fff , 1715px 1858px #fff , 513px 1974px #fff , 179px 73px #fff , 622px 1477px #fff , 1070px 784px #fff , 1191px 1699px #fff , 335px 1314px #fff , 1585px 858px #fff , 949px 405px #fff , 188px 1253px #fff , 1523px 516px #fff , 1877px 1731px #fff , 1506px 553px #fff , 1078px 1331px #fff , 991px 183px #fff , 301px 30px #fff , 600px 14px #fff , 1356px 1153px #fff , 1105px 517px #fff , 1547px 656px #fff , 632px 661px #fff , 377px 174px #fff , 126px 1752px #fff , 489px 1087px #fff , 1820px 1031px #fff , 1492px 1642px #fff , 1386px 917px #fff , 421px 1981px #fff , 1490px 1931px #fff , 1201px 1802px #fff , 887px 1610px #fff , 764px 846px #fff , 455px 74px #fff , 872px 566px #fff , 793px 1193px #fff , 665px 1775px #fff , 1595px 667px #fff , 1587px 459px #fff , 64px 1687px #fff , 953px 233px #fff , 1705px 76px #fff , 389px 1439px #fff , 1663px 1712px #fff , 1842px 969px #fff , 222px 6px #fff , 541px 510px #fff , 580px 968px #fff , 29px 964px #fff , 1246px 532px #fff , 1226px 1662px #fff , 1422px 1738px #fff , 324px 375px #fff , 726px 311px #fff , 1382px 597px #fff , 781px 1626px #fff , 1723px 282px #fff , 1008px 1708px #fff , 787px 952px #fff , 1080px 102px #fff , 1269px 207px #fff , 602px 1285px #fff , 318px 1532px #fff , 1930px 420px #fff , 1641px 191px #fff , 1985px 1056px #fff , 1943px 647px #f.........完整代码请登录后点击上方下载按钮下载查看