纯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.........完整代码请登录后点击上方下载按钮下载查看