开场动画特效

最新推荐文章于 2024-02-15 09:15:57 发布
最新推荐文章于 2024-02-15 09:15:57 发布
阅读量560 收藏 3
点赞数
分类专栏： html

 转自：http://www.5iweb.com.cn/html5-css3-effects/870.html

下面是我自己做的代码 改一下图片名字就好  加了个s 我是换了个颜色

有瑕疵 后来把转圈圈的图片那个效果给干掉了

 


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>开场特效</title>
<style>
html,canvas,body{
    width: 100%; height: 100%;
    overflow: hidden;
    font: 1em/1.5em 'Helvetica';
    color: #333;
    -webkit-user-select:disabled;
    padding: 0;
    margin: 0;
}
body{
        display: flex;
        min-width: 900px;
        min-height: 625px;
    background: #000;
    -webkit-perspective:1000px;
        overflow: hidden;
        justify-content: center;
        align-items: center;
}
.in div{
    opacity: 1;
    -webkit-transform: translateZ(0px) rotateY(0) rotateX(0);
}

#ringgroup{
    position: absolute;
    width: 800px;
    height: 800px;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -400px;
    -webkit-transition: All 2.2s 0.1s;
    -webkit-transform: rotateZ(-360deg) translateZ(-4000px) scale(0.02);
    -webkit-perspective:1000px;
    -webkit-transform-style:preserve-3d;
}
#ringgroup.pass{
    -webkit-transform:rotateZ(0) translateZ(3200px) scale(1);
    opacity: 0;
}
.ring{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('images/rings.png');
    -webkit-transform-style:preserve-3d;
    /*border: 4px solid white;*/
    /*border-radius: 400px;*/
}
.ring:nth-of-type(1){-webkit-transform: translateZ(0px);opacity: 1;}
.ring:nth-of-type(2){-webkit-transform: rotateZ(60deg) translateZ(-1000px) scale(0.9);opacity: 0.7;}
.ring:nth-of-type(3){-webkit-transform: rotateZ(120deg) translateZ(-200px) scale(0.8);opacity: 0.5;}
.ring:nth-of-type(4){-webkit-transform: rotateZ(30deg) translateZ(-3000px) scale(0.7);opacity: 0.1;}

#light{
    width: 700px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -350px;
    margin-top: -250px;
    background: url('images/lights.png');
    -webkit-transform:scaleX(0.1) scaleY(0.1);
    -webkit-filter:brightness(0);
    -webkit-transition:All 0.4s ease-in;
}
#light.pass{
    -webkit-transform:scaleX(2) scaleY(0.5);
    -webkit-filter:brightness(6);
}
#light.passed{
    -webkit-transform:scaleX(6) scaleY(1.1);
    -webkit-filter:brightness(0);
    -webkit-transition:All 0.3s ease-out;
}
#wave{
    width: 320px;
    height: 320px;
    top: 50%;
    left: 50%;
    margin-left: -160px;
    margin-top: -160px;
    position: absolute;
    background: url('images/waves.png');
    -webkit-transform: scale(0.01);
    -webkit-transition: All 0.9s 0.62s ease;
    -webkit-filter:brightness(3);
}
#wave.pass{
    -webkit-transform: scale(12);
    -webkit-filter:brightness(1);
    opacity: 0;
}

        /*******************************************************************/
        #stars {
            width: 1px;
            height: 1px;
            background: transparent;
            box-shadow:2458px 1038px #FFF , 2458px 938px #FFF , 2587px 454px #FFF , 2687px 852px #FFF , 2558px 688px #FFF , 2458px 938px #FFF , 1458px 1598px #FFF , 2258px 1538px #FFF , 2158px 1938px #FFF , 2358px 2649px #FFF , 2225px 2587px #FFF , 2555px 2956px #FFF , 2628px 2428px #FFF , 1458px 2238px #FFF , 999px 999px #FFF , 2340px 1000px #FFF , 1969px 1983px #FFF , 2199px 2329px #FFF , 2452px 1569px #FFF , 2018px 1999px #FFF , 2584px 1996px #FFF , 2020px 1224px #FFF , 2359px 1811px #FFF , 2450px 1279px #FFF , 2250px 1617px #FFF , 2348px 1894px #FFF , 2294px 1760px #FFF , 2411px 1695px #FFF , 2423px 1337px #FFF , 2093px 1431px #FFF , 1968px 1654px #FFF , 2084px 1348px #FFF , 2267px 1614px #FFF , 2258px 1394px #FFF , 2348px 1372px #FFF , 2294px 1298px #FFF , 2411px 1242px #FFF , 2423px 1499px #FFF , 2093px 1269px #FFF , 1968px 1795px #FFF , 2084px 1978px #FFF , 2267px 1421px #FFF , 2258px 1133px #FFF , 2048px 1588px #FFF , 2348px 1221px #FFF , 2294px 457px #FFF , 2411px 666px #FFF , 2423px 1098px #FFF , 2093px 1382px #FFF , 1968px 1396px #FFF , 2084px 78px #FFF , 2267px 691px #FFF , 2258px 1080px #FFF , 2048px 848px #FFF , 2015px 251px #FFF , 2179px 856px #FFF , 2057px 805px #FFF , 2158px 952px #FFF , 2079px 489px #FFF , 2057px 794px #FFF , 2158px 945px #FFF , 2079px 159px #FFF , 2057px 544px #FFF , 2277px 1056px #FFF , 2147px 235px #FFF , 2237px 1025px #FFF , 2327px 1505px #FFF , 2277px 928px #FFF , 2477px 955px #FFF , 2177px 1255px #FFF , 2227px 155px #FFF , 2077px 928px #FFF , 2077px 955px #FFF , 2077px 1255px #FFF , 2077px 155px #FFF , 2077px 1055px #FFF , 2166px 459px #FFF , 2058px 456px #FFF , 2167px 654px #FFF , 2279px 748px #FFF , 2324px 657px #FFF , 2359px 1648px #FFF , 2279px 498px #FFF , 2079px 148px #FFF , 2390px 500px #fff , 2250px 300px #fff , 2060px 420px #fff , 2020px 590px #fff , 2030px 840px #fff , 2450px 310px #fff , 2150px 550px #fff , 2050px 272px #fff , 2000px 499px #fff , 2120px 853px #fff , 2200px 340px #fff , 2390px 50px #fff , 2250px 100px #fff , 2060px 120px #fff , 2020px 190px #fff , 2030px 140px #fff , 2450px 210px #fff , 2150px 250px #fff , 2050px 22px #fff , 2000px 99px #fff , 2120px 353px #fff , 2200px 340px #fff , 2300px 760px #fff , 1407px 511px #FFF , 1611px 119px #FFF , 1686px 956px #FFF , 1163px 1929px #FFF , 912px 1242px #FFF , 490px 469px #FFF , 869px 425px #FFF , 1447px 891px #FFF , 422px 1960px #FFF , 517px 1995px #FFF , 738px 171px #FFF , 1328px 1668px #FFF , 874px 1490px #FFF , 83px 81px #FFF , 632px 98px #FFF , 1518px 1764px #FFF , 636px 596px #FFF , 1178px 131px #FFF , 278px 1179px #FFF , 1898px 1951px #FFF , 1787px 326px #FFF , 186px 1588px #FFF , 552px 1942px #FFF , 1929px 1300px #FFF , 802px 681px #FFF , 430px 1711px #FFF , 1192px 308px #FFF , 123px 1604px #FFF , 880px 169px #FFF , 1400px 632px #FFF , 500px 1165px #FFF , 288px 1208px #FFF , 319px 1419px #FFF , 1170px 980px #FFF , 1608px 784px #FFF , 1735px 1276px #FFF , 966px 1534px #FFF , 654px 783px #FFF , 1366px 964px #FFF , 1213px 60px #FFF , 302px 1509px #FFF , 845px 714px #FFF , 524px 323px #FFF , 1538px 1399px #FFF , 394px 619px #FFF , 680px 26px #FFF , 353px 776px #FFF , 1826px 1450px #FFF , 1909px 1452px #FFF , 1014px 1315px #FFF , 1883px 1474px #FFF , 766px 1742px #FFF , 1693px 658px #FFF , 1186px 302px #FFF , 376px 1575px #FFF , 712px 1739px #FFF , 1627px 299px #FFF , 482px 224px #FFF , 1379px 510px #FFF , 1543px 1602px #FFF , 45px 606px #FFF , 827px 1336px #FFF , 224px 1939px #FFF , 1098px 1342px #FFF , 813px 1553px #FFF , 825px 419px #FFF , 519px 894px #FFF , 1406px 797px #FFF , 1341px 274px #FFF , 1787px 903px #FFF , 1701px 1483px #FFF , 1108px 232px #FFF , 1599px 1409px #FFF , 659px 870px #FFF , 1538px 335px #FFF , 632px 1855px #FFF , 154px 1026px #FFF , 1722px 979px #FFF , 1339px 509px #FFF , 1833px 460px #FFF , 315px 65px #FFF , 496px 1927px #FFF , 1314px 427px #FFF , 344px 1046px #FFF , 1658px 724px #FFF , 1899px 264px #FFF , 1200px 1305px #FFF , 1562px 339px #FFF , 159px 766px #FFF , 1639px 1966px #FFF , 459px 1898px #FFF , 944px 763px #FFF , 1174px 1056px #FFF , 1825px 790px #FFF , 906px 1526px #FFF , 1537px 1303px #FFF , 79px 1105px #FFF , 1318px 672px #FFF , 1232px 61px #FFF , 709px 1078px #FFF , 1010px 1810px #FFF , 777px 1160px #FFF , 1598px 1428px #FFF , 815px 684px #FFF , 1003px 943px #FFF , 1876px 1003px #FFF , 1025px 1529px #FFF , 66px 549px #FFF , 514px 457px #FFF , 262px 1005px #FFF , 812px 1705px #FFF , 1163px 1087px #FFF , 165px 45px #FFF , 677px 1462px #FFF , 580px 1675px #FFF , 1848px 1384px #FFF , 449px 862px #FFF , 1629px 1979px #FFF , 667px 135px #FFF , 240px 53px #FFF , 1919px 1832px #FFF , 696px 1384px #FFF , 1630px 361px #FFF , 878px 663px #FFF , 1226px 1723px #FFF , 765px 686px #FFF , 576px 1647px #FFF , 97px 1602px #FFF , 1117px 1049px #FFF , 1433px 68px #FFF , 1375px 1991px #FFF , 1755px 990px #FFF , 1483px 801px #FFF , 473px 1802px #FFF , 822px 768px #FFF , 196px 577px #FFF , 516px 504px #FFF , 623px 981px #FFF , 1478px 819px #FFF , 126px 384px #FFF , 584px 1908px #FFF , 1549px 521px #FFF , 1866px 1335px #FFF , 586px 342px #FFF , 1698px 642px #FFF , 136px 188px #FFF , 1613px 520px #FFF , 937px 326px #FFF , 1111px 169px #FFF , 229px 229px #FFF , 1357px 20px #FFF , 725px 1305px #FFF , 23px 1977px #FFF , 426px 1945px #FFF , 1628px 1530px #FFF , 256px 1295px #FFF , 58px 78px #FFF , 409px 1145px #FFF , 1607px 767px #FFF , 212px 144px #FFF , 361px 1890px #FFF , 1827px 1451px #FFF , 1875px 645px #FFF , 571px 853px #FFF , 1302px 301px #FFF , 9px 1344px #FFF , 418px 619px #FFF , 1941px 90px #FFF , 949px 640px #FFF , 179px 1783px #FFF , 1104px 360px #FFF , 1723px 370px #FFF , 1122px 1418px #FFF , 1374px 508px #FFF , 1108px 1089px #FFF , 1440px 1743px #FFF , 462px 1495px #FFF , 1187px 265px #FFF , 567px 74px #FFF , 557px 542px #FFF , 967px 673px #FFF , 825px 1971px #FFF , 988px 1260px #FFF , 710px 1206px #FFF , 538px 1805px #FFF , 137px 861px #FFF , 1922px 1313px #FFF , 481px 470px #FFF , 1224px 316px #FFF , 1979px 239px #FFF , 22px 1155px #FFF , 1640px 186px #FFF , 592px 1709px #FFF , 765px 170px #FFF , 129px 1750px #FFF , 788px 719px #FFF , 181px 1327px #FFF , 433px 1455px #FFF , 141px 450px #FFF , 1287px 1027px #FFF , 1278px 1462px #FFF , 688px 1526px #FFF , 463px 1604px #FFF , 1232px 297px #FFF , 920px 1227px #FFF , 1571px 1765px #FFF , 1482px 1316px #FFF , 759px 1463px #FFF , 950px 1166px #FFF , 1532px 1588px #FFF , 608px 267px #FFF , 1862px 1943px #FFF , 805px 717px #FFF , 1803px 1319px #FFF , 1821px 683px #FFF , 995px 1958px #FFF , 484px 932px #FFF , 366px 901px #FFF , 451px 1563px #FFF , 1704px 1471px #FFF , 1379px 44px #FFF , 1778px 472px #FFF , 419px 1806px #FFF , 1545px 222px #FFF , 1563px 777px #FFF , 39px 964px #FFF , 1620px 24px #FFF , 1151px 320px #FFF , 1940px 1426px #FFF , 1555px 1538px #FFF , 1747px 488px #FFF , 1348px 300px #FFF , 990px 538px #FFF , 780px 361px #FFF , 988px 971px #FFF , 1973px 1534px #FFF , 1542px 1829px #FFF , 1557px 216px #FFF , 1404px 641px #FFF , 47px 877px #FFF , 65px 1738px #FFF , 1895px 1798px #FFF , 56px 591px #FFF , 536px 906px #FFF , 568px 74px #FFF , 433px 462px #FFF , 727px 295px #FFF , 876px 1878px #FFF , 1891px 1946px #FFF , 1451px 493px #FFF , 1569px 226px #FFF , 879px 1351px #FFF , 1529px 43px #FFF , 33px 74px #FFF , 1516px 1924px #FFF , 878px 323px #FFF , 455px 1122px #FFF , 1943px 526px #FFF , 1456px 1060px #FFF , 1631px 979px #FFF , 1819px 1324px #FFF , 1660px 1192px #FFF , 1867px 1714px #FFF , 1928px 1940px #FFF , 1618px 744px #FFF , 979px 357px #FFF , 98px 1645px #FFF , 1898px 1207px #FFF , 1134px 16px #FFF , 1313px 1018px #FFF , 717px 812px #FFF , 1503px 234px #FFF , 1612px 188px #FFF , 29px 459px #FFF , 414px 1487px #FFF , 1223px 1730px #FFF , 1643px 1188px #FFF , 424px 767px #FFF , 1692px 1591px #FFF , 1265px 367px #FFF , 54px 832px #FFF , 410px 804px #FFF , 1397px 1242px #FFF , 549px 1484px #FFF , 721px 1088px #FFF , 472px 1240px #FFF , 1927px 514px #FFF , 1303px 1310px #FFF , 71px 1276px #FFF , 829px 1332px #FFF , 84px 1920px #FFF , 1088px 375px #FFF , 1659px 736px #FFF , 967px 294px #FFF , 651px 92px #FFF , 1572px 143px #FFF , 1680px 770px #FFF , 1873px 1289px #FFF , 1983px 821px #FFF , 448px 1090px #FFF , 890px 1332px #FFF , 836px 867px #FFF , 1867px 1213px #FFF , 1874px 1574px #FFF , 750px 1063px #FFF , 1297px 1971px #FFF , 1274px 1015px #FFF , 1628px 933px #FFF , 309px 1386px #FFF , 299px 1621px #FFF , 1973px 526px #FFF , 196px 1416px #FFF , 778px 715px #FFF , 1993px 1294px #FFF , 381px 435px #FFF , 1405px 681px #FFF , 1759px 1077px #FFF , 1764px 1748px #FFF , 168px 470px #FFF , 978px 781px #FFF , 110px 1666px #FFF , 835px 747px #FFF , 112px 95px #FFF , 604px 712px #FFF , 1121px 1752px #FFF , 393px 1782px #FFF , 1869px 830px #FFF , 1303px 348px #FFF , 427px 1546px #FFF , 761px 718px #FFF , 946px 674px #FFF , 832px 964px #FFF , 1607px 2000px #FFF , 1624px 1296px #FFF , 1093px 735px #FFF , 1865px 608px #FFF , 933px 1278px #FFF , 1402px 547px #FFF , 1865px 1211px #FFF , 109px 72px #FFF , 249px 1482px #FFF , 586px 1933px #FFF , 911px 1336px #FFF , 697px 853px #FFF , 987px 1797px #FFF , 1371px 933px #FFF , 492px 1896px #FFF , 998px 1866px #FFF , 518px 31px #FFF , 1873px 372px #FFF , 1025px 1308px #FFF , 1478px 965px #FFF , 1934px 934px #FFF , 1048px 1262px #FFF , 1839px 40px #FFF , 1399px 732px #FFF , 735px 416px #FFF , 621px 394px #FFF , 788px 1802px #FFF , 1918px 307px #FFF , 432px 1845px #FFF , 616px 481px #FFF , 921px 798px #FFF , 354px 597px #FFF , 1622px 214px #FFF , 1349px 1983px #FFF , 1033px 1622px #FFF , 1198px 407px #FFF , 1239px 1449px #FFF , 1278px 1978px #FFF , 426px 1264px #FFF , 507px 1341px #FFF , 1956px 818px #FFF , 1041px 277px #FFF , 1371px 639px #FFF , 1224px 419px #FFF , 211px 1106px #FFF , 847px 656px #FFF , 534px 1891px #FFF , 1289px 823px #FFF , 906px 482px #FFF , 347px 1837px #FFF , 1246px 1462px #FFF , 915px 1858px #FFF , 559px 1320px #FFF , 77px 1555px #FFF , 845px 1743px #FFF , 313px 1414px #FFF , 188px 252px #FFF , 509px 637px #FFF , 374px 142px #FFF , 1397px 474px #FFF , 458px 1197px #FFF , 292px 619px #FFF , 1749px 14px #FFF , 1638px 24px #FFF , 563px 1752px #FFF , 1940px 1065px #FFF , 1145px 1030px #FFF , 894px 1470px #FFF , 444px 32px #FFF , 1341px 1136px #FFF , 1941px 412px #FFF , 1328px 785px #FFF , 161px 1740px #FFF , 948px 829px #FFF , 933px 823px #FFF , 1709px 507px #FFF , 1366px 1821px #FFF , 720px 731px #FFF , 162px 682px #FFF , 1684px 882px #FFF , 134px 497px #FFF , 1659px 1701px #FFF , 1186px 446px #FFF , 911px 1435px #FFF , 1814px 1028px #FFF , 1234px 1520px #FFF , 1186px 23px #FFF , 318px 87px #FFF , 1179px 837px #FFF , 1071px 46px #FFF , 1125px 1862px #FFF , 94px 261px #FFF , 1574px 282px #FFF , 1039px 815px #FFF , 1776px 1472px #FFF , 867px 473px #FFF , 901px 215px #FFF , 862px 630px #FFF , 1480px 1673px #FFF , 411px 1896px #FFF , 1335px 944px #FFF , 148px 1235px #FFF , 57px 140px #FFF , 447px 651px #FFF , 1414px 1651px #FFF , 209px 1770px #FFF , 1800px 1590px #FFF , 1304px 1px #FFF , 279px 771px #FFF , 1770px 1398px #FFF , 724px 1201px #FFF , 245px 1145px #FFF , 172px 1951px #FFF , 284px 236px #FFF , 1905px 1307px #FFF , 1948px 574px #FFF , 283px 669px #FFF , 247px 384px #FFF , 224px 619px #FFF , 128px 772px #FFF , 1698px 1405px #FFF , 830px 505px #FFF , 1938px 397px #FFF , 1772px 1001px #FFF , 1454px 808px #FFF , 304px 561px #FFF , 1321px 966px #FFF , 735px 1368px #FFF , 894px 345px #FFF , 1217px 1997px #FFF , 892px 1342px #FFF , 353px 379px #FFF , 1382px 1156px #FFF , 164px 1239px #FFF , 1268px 1859px #FFF , 1385px 1721px #FFF , 16px 283px #FFF , 1819px 200px #FFF , 660px 1111px #FFF , 1679px 1728px #FFF , 463px 596px #FFF , 217px 1834px #FFF , 1879px 538px #FFF , 304px 906px #FFF , 1327px 1347px #FFF , 1226px 1579px #FFF , 1786px 1616px #FFF , 1234px 1982px #FFF , 1868px 1862px #FFF , 814px 948px #FFF , 178px 1837px #FFF , 571px 1701px #FFF , 106px 566px #FFF , 270px 925px #FFF , 1417px 248px #FFF , 609px 1551px #FFF , 992px 1825px #FFF , 1515px 1999px #FFF , 1167px 914px #FFF , 1698px 490px #FFF , 189px 1463px #FFF , 928px 612px #FFF , 1714px 803px #FFF , 535px 402px #FFF , 1000px 379px #FFF , 1610px 574px #FFF , 1882px 1155px #FFF , 1425px 1514px #FFF , 417px 1987px #FFF , 1681px 1059px #FFF , 841px 762px #FFF , 1886px 1098px #FFF , 1785px 236px #FFF , 1950px 950px #FFF , 444px 1937px #FFF , 1364px 540px #FFF , 1971px 225px #FFF , 1624px 868px #FFF , 869px 640px #FFF , 1637px 559px #FFF , 20px 823px #FFF , 409px 177px #FFF , 1804px 1626px #FFF , 388px 527px #FFF , 1385px 1734px #FFF , 988px 1310px #FFF , 443px 599px #FFF , 1780px 434px #FFF , 654px 419px #FFF , 268px 1424px #FFF , 1971px 40px #FFF , 360px 1834px #FFF , 875px 1930px #FFF , 1866px 1885px #FFF , 453px 1670px #FFF , 1696px 1337px #FFF , 604px 1887px #FFF , 1405px 769px #FFF , 1546px 897px #FFF , 595px 1975px #FFF , 32px 1765px #FFF , 896px 1150px #FFF , 1818px 95px #FFF , 444px 49px #FFF , 589px 1796px #FFF , 764px 1965px #FFF , 920px 1803px #FFF , 403px 1997px #FFF , 833px 1282px #FFF , 1127px 1770px #FFF , 1810px 77px #FFF , 1214px 1102px #FFF , 364px 401px #FFF , 1139px 1191px #FFF , 916px 1907px #FFF , 870px 290px #FFF , 688px 678px #FFF , 1523px 34px #FFF , 1265px 1082px #FFF , 1394px 1080px #FFF , 1787px 1738px #FFF , 1682px 755px #FFF , 1955px 832px #FFF , 546px 1577px #FFF , 1062px 1561px #FFF , 344px 826px #FFF , 1442px 782px #FFF , 467px 1477px #FFF , 879px 1439px #FFF , 1672px 268px #FFF , 1317px 1355px #FFF , 1980px 1965px #FFF , 688px 1465px #FFF , 1131px 872px #FFF , 1301px 1656px #FFF , 974px 583px #FFF , 1613px 1467px #FFF , 1976px 1995px #FFF , 1377px 760px #FFF , 1367px 387px #FFF , 1880px 191px #FFF , 711px 876px #FFF , 539px 152px #FFF , 545px 1809px #FFF , 920px 970px #FFF , 1154px 1355px #FFF , 1968px 94px #FFF , 1703px 490px #FFF , 380px 146px #FFF , 1561px 785px #FFF , 1930px 1385px #FFF , 519px 1091px #FFF , 269px 570px #FFF , 109px 1326px #FFF , 1476px 969px #FFF , 1999px 1885px #FFF , 341px 1238px #FFF , 1105px 1076px #FFF , 596px 88px #FFF , 937px 492px #FFF , 1339px 1673px #FFF , 1967px 762px #FFF , 65px 952px #FFF , 111px 93px #FFF , 1011px 1684px #FFF , 377px 1430px #FFF , 1011px 386px #FFF , 1162px 421px #FFF , 196px 617px #FFF , 1407px 1141px #FFF , 1562px 572px #FFF , 316px 690px #FFF , 1600px 1980px #FFF , 1545px 1254px #FFF , 680px 1120px #FFF , 575px 1284px #FFF , 179px 1470px #FFF , 1496px 1506px #FFF , 977px 1376px #FFF , 1282px 708px #FFF , 408px 1427px #FFF , 1173px 1597px #FFF , 1120px 1755px #FFF , 974px 520px #FFF , 979px 384px #FFF , 622px 1116px #FFF , 1307px 866px #FFF , 1188px 1596px #FFF , 858px 1947px #FFF , 861px 1373px #FFF , 857px 43px #FFF , 1878px 499px #FFF , 1297px 535px #FFF , 870px 1286px #FFF , 1452px 448px #FFF , 906px 72px #FFF , 1450px 872px #FFF , 1607px 1755px #FFF , 1071px 1959px #FFF , 976px 879px #FFF , 1435px 284px #FFF , 1601px 496px #FFF , 671px 1713px #FFF , 356px 1148px #FFF , 837px 867px #FFF , 246px 858px #FFF , 1031px 1594px #FFF , 571px 214px #FFF , 1012px 1329px #FFF , 1566px 1142px #FFF , 219px 1376px #FFF , 1580px 1454px #FFF , 690px 1037px #FFF , 1940px 756px #FFF , 1755px 850px #FFF , 1037px 363px #FFF , 25px 515px #FFF , 806px 1571px #FFF , 1266px 1398px #FFF , 695px 791px #FFF , 1838px 950px #FFF , 1578px 27px #FFF , 1692px 1581px #FFF , 1817px 1040px #FFF , 1781px 238px #FFF , 1052px 895px #FFF , 398px 440px #FFF , 1643px 325px #FFF , 79px 848px #FFF , 1295px 326px #FFF , 293px 81px #FFF , 1202px 1580px #FFF , 1441px 100px #FFF , 1295px 1465px #FFF , 1132px 1275px #FFF , 774px 704px #FFF , 1109px 1546px #FFF , 557px 1390px #FFF , 1253px 1224px #FFF , 1063px 1618px #FFF , 1793px 440px #FFF , 890px 1988px #FFF , 814px 424px #FFF , 1390px 1280px #FFF , 1127px 907px #FFF , 1044px 1368px #FFF , 1317px 876px #FFF , 762px 638px #FFF , 965px 747px #FFF , 755px 1945px #FFF , 706px 414px #FFF , 1842px 1673px #FFF , 1158px 1336px #FFF , 989px 1955px #FFF , 1857px 89px #FFF , 1659px 343px #FFF , 509px 1385px #FFF , 1620px 758px #FFF , 1958px 1064px #FFF , 178px 341px #FFF , 1500px 808px #FFF , 20px 1646px #FFF , 1572px 870px #FFF , 1821px 1377px #FFF , 328px 1965px #FFF , 903px 616px #FFF , 1731px 1599px #FFF , 267px 856px #FFF;
            animation: animStar 50s linear infinite;
        }
        #stars:after {
            content: " ";
            position: absolute;
            top: 2000px;
            width: 1px;
            height: 1px;
            background: transparent;
            box-shadow:2348px 952px #FFF , 2294px 952px #FFF , 2411px 952px #FFF , 2423px 952px #FFF , 2093px 952px #FFF , 1968px 952px #FFF , 2084px 952px #FFF , 2267px 952px #FFF , 2258px 952px #FFF , 2048px 952px #FFF , 2015px 952px #FFF , 2179px 856px #FFF , 2057px 805px #FFF , 2158px 952px #FFF , 2079px 856px #FFF , 2057px 805px #FFF , 2158px 952px #FFF , 2079px 489px #FFF , 2057px 794px #FFF , 2158px 945px #FFF , 2079px 159px #FFF , 2057px 544px #FFF , 2277px 1056px #FFF , 2147px 235px #FFF , 2237px 1025px #FFF , 2327px 1505px #FFF , 2277px 928px #FFF , 2477px 955px #FFF , 2177px 1255px #FFF , 2227px 155px #FFF , 2077px 928px #FFF , 2077px 955px #FFF , 2077px 1255px #FFF , 2077px 155px #FFF , 2077px 1055px #FFF , 2166px 459px #FFF , 2058px 456px #FFF , 2167px 654px #FFF , 2279px 748px #FFF , 2324px 657px #FFF , 2359px 1648px #FFF , 2279px 498px #FFF , 2079px 148px #FFF , 2390px 500px #fff , 2250px 700px #fff , 2060px 420px #fff , 2020px 590px #fff , 2030px 340px #fff , 2450px 410px #fff , 2150px 650px #fff , 2050px 222px #fff , 2000px 599px #fff , 2120px 453px #fff , 2200px 740px #fff , 2300px 760px #fff , 1407px 511px #FFF , 1611px 119px #FFF , 1686px 956px #FFF , 1163px 1929px #FFF , 912px 1242px #FFF , 490px 469px #FFF , 869px 425px #FFF , 1447px 891px #FFF , 422px 1960px #FFF , 517px 1995px #FFF , 738px 171px #FFF , 1328px 1668px #FFF , 874px 1490px #FFF , 83px 81px #FFF , 632px 98px #FFF , 1518px 1764px #FFF , 636px 596px #FFF , 1178px 131px #FFF , 278px 1179px #FFF , 1898px 1951px #FFF , 1787px 326px #FFF , 186px 1588px #FFF , 552px 1942px #FFF , 1929px 1300px #FFF , 802px 681px #FFF , 430px 1711px #FFF , 1192px 308px #FFF , 123px 1604px #FFF , 880px 169px #FFF , 1400px 632px #FFF , 500px 1165px #FFF , 288px 1208px #FFF , 319px 1419px #FFF , 1170px 980px #FFF , 1608px 784px #FFF , 1735px 1276px #FFF , 966px 1534px #FFF , 654px 783px #FFF , 1366px 964px #FFF , 1213px 60px #FFF , 302px 1509px #FFF , 845px 714px #FFF , 524px 323px #FFF , 1538px 1399px #FFF , 394px 619px #FFF , 680px 26px #FFF , 353px 776px #FFF , 1826px 1450px #FFF , 1909px 1452px #FFF , 1014px 1315px #FFF , 1883px 1474px #FFF , 766px 1742px #FFF , 1693px 658px #FFF , 1186px 302px #FFF , 376px 1575px #FFF , 712px 1739px #FFF , 1627px 299px #FFF , 482px 224px #FFF , 1379px 510px #FFF , 1543px 1602px #FFF , 45px 606px #FFF , 827px 1336px #FFF , 224px 1939px #FFF , 1098px 1342px #FFF , 813px 1553px #FFF , 825px 419px #FFF , 519px 894px #FFF , 1406px 797px #FFF , 1341px 274px #FFF , 1787px 903px #FFF , 1701px 1483px #FFF , 1108px 232px #FFF , 1599px 1409px #FFF , 659px 870px #FFF , 1538px 335px #FFF , 632px 1855px #FFF , 154px 1026px #FFF , 1722px 979px #FFF , 1339px 509px #FFF , 1833px 460px #FFF , 315px 65px #FFF , 496px 1927px #FFF , 1314px 427px #FFF , 344px 1046px #FFF , 1658px 724px #FFF , 1899px 264px #FFF , 1200px 1305px #FFF , 1562px 339px #FFF , 159px 766px #FFF , 1639px 1966px #FFF , 459px 1898px #FFF , 944px 763px #FFF , 1174px 1056px #FFF , 1825px 790px #FFF , 906px 1526px #FFF , 1537px 1303px #FFF , 79px 1105px #FFF , 1318px 672px #FFF , 1232px 61px #FFF , 709px 1078px #FFF , 1010px 1810px #FFF , 777px 1160px #FFF , 1598px 1428px #FFF , 815px 684px #FFF , 1003px 943px #FFF , 1876px 1003px #FFF , 1025px 1529px #FFF , 66px 549px #FFF , 514px 457px #FFF , 262px 1005px #FFF , 812px 1705px #FFF , 1163px 1087px #FFF , 165px 45px #FFF , 677px 1462px #FFF , 580px 1675px #FFF , 1848px 1384px #FFF , 449px 862px #FFF , 1629px 1979px #FFF , 667px 135px #FFF , 240px 53px #FFF , 1919px 1832px #FFF , 696px 1384px #FFF , 1630px 361px #FFF , 878px 663px #FFF , 1226px 1723px #FFF , 765px 686px #FFF , 576px 1647px #FFF , 97px 1602px #FFF , 1117px 1049px #FFF , 1433px 68px #FFF , 1375px 1991px #FFF , 1755px 990px #FFF , 1483px 801px #FFF , 473px 1802px #FFF , 822px 768px #FFF , 196px 577px #FFF , 516px 504px #FFF , 623px 981px #FFF , 1478px 819px #FFF , 126px 384px #FFF , 584px 1908px #FFF , 1549px 521px #FFF , 1866px 1335px #FFF , 586px 342px #FFF , 1698px 642px #FFF , 136px 188px #FFF , 1613px 520px #FFF , 937px 326px #FFF , 1111px 169px #FFF , 229px 229px #FFF , 1357px 20px #FFF , 725px 1305px #FFF , 23px 1977px #FFF , 426px 1945px #FFF , 1628px 1530px #FFF , 256px 1295px #FFF , 58px 78px #FFF , 409px 1145px #FFF , 1607px 767px #FFF , 212px 144px #FFF , 361px 1890px #FFF , 1827px 1451px #FFF , 1875px 645px #FFF , 571px 853px #FFF , 1302px 301px #FFF , 9px 1344px #FFF , 418px 619px #FFF , 1941px 90px #FFF , 949px 640px #FFF , 179px 1783px #FFF , 1104px 360px #FFF , 1723px 370px #FFF , 1122px 1418px #FFF , 1374px 508px #FFF , 1108px 1089px #FFF , 1440px 1743px #FFF , 462px 1495px #FFF , 1187px 265px #FFF , 567px 74px #FFF , 557px 542px #FFF , 967px 673px #FFF , 825px 1971px #FFF , 988px 1260px #FFF , 710px 1206px #FFF , 538px 1805px #FFF , 137px 861px #FFF , 1922px 1313px #FFF , 481px 470px #FFF , 1224px 316px #FFF , 1979px 239px #FFF , 22px 1155px #FFF , 1640px 186px #FFF , 592px 1709px #FFF , 765px 170px #FFF , 129px 1750px #FFF , 788px 719px #FFF , 181px 1327px #FFF , 433px 1455px #FFF , 141px 450px #FFF , 1287px 1027px #FFF , 1278px 1462px #FFF , 688px 1526px #FFF , 463px 1604px #FFF , 1232px 297px #FFF , 920px 1227px #FFF , 1571px 1765px #FFF , 1482px 1316px #FFF , 759px 1463px #FFF , 950px 1166px #FFF , 1532px 1588px #FFF , 608px 267px #FFF , 1862px 1943px #FFF , 805px 717px #FFF , 1803px 1319px #FFF , 1821px 683px #FFF , 995px 1958px #FFF , 484px 932px #FFF , 366px 901px #FFF , 451px 1563px #FFF , 1704px 1471px #FFF , 1379px 44px #FFF , 1778px 472px #FFF , 419px 1806px #FFF , 1545px 222px #FFF , 1563px 777px #FFF , 39px 964px #FFF , 1620px 24px #FFF , 1151px 320px #FFF , 1940px 1426px #FFF , 1555px 1538px #FFF , 1747px 488px #FFF , 1348px 300px #FFF , 990px 538px #FFF , 780px 361px #FFF , 988px 971px #FFF , 1973px 1534px #FFF , 1542px 1829px #FFF , 1557px 216px #FFF , 1404px 641px #FFF , 47px 877px #FFF , 65px 1738px #FFF , 1895px 1798px #FFF , 56px 591px #FFF , 536px 906px #FFF , 568px 74px #FFF , 433px 462px #FFF , 727px 295px #FFF , 876px 1878px #FFF , 1891px 1946px #FFF , 1451px 493px #FFF , 1569px 226px #FFF , 879px 1351px #FFF , 1529px 43px #FFF , 33px 74px #FFF , 1516px 1924px #FFF , 878px 323px #FFF , 455px 1122px #FFF , 1943px 526px #FFF , 1456px 1060px #FFF , 1631px 979px #FFF , 1819px 1324px #FFF , 1660px 1192px #FFF , 1867px 1714px #FFF , 1928px 1940px #FFF , 1618px 744px #FFF , 979px 357px #FFF , 98px 1645px #FFF , 1898px 1207px #FFF , 1134px 16px #FFF , 1313px 1018px #FFF , 717px 812px #FFF , 1503px 234px #FFF , 1612px 188px #FFF , 29px 459px #FFF , 414px 1487px #FFF , 1223px 1730px #FFF , 1643px 1188px #FFF , 424px 767px #FFF , 1692px 1591px #FFF , 1265px 367px #FFF , 54px 832px #FFF , 410px 804px #FFF , 1397px 1242px #FFF , 549px 1484px #FFF , 721px 1088px #FFF , 472px 1240px #FFF , 1927px 514px #FFF , 1303px 1310px #FFF , 71px 1276px #FFF , 829px 1332px #FFF , 84px 1920px #FFF , 1088px 375px #FFF , 1659px 736px #FFF , 967px 294px #FFF , 651px 92px #FFF , 1572px 143px #FFF , 1680px 770px #FFF , 1873px 1289px #FFF , 1983px 821px #FFF , 448px 1090px #FFF , 890px 1332px #FFF , 836px 867px #FFF , 1867px 1213px #FFF , 1874px 1574px #FFF , 750px 1063px #FFF , 1297px 1971px #FFF , 1274px 1015px #FFF , 1628px 933px #FFF , 309px 1386px #FFF , 299px 1621px #FFF , 1973px 526px #FFF , 196px 1416px #FFF , 778px 715px #FFF , 1993px 1294px #FFF , 381px 435px #FFF , 1405px 681px #FFF , 1759px 1077px #FFF , 1764px 1748px #FFF , 168px 470px #FFF , 978px 781px #FFF , 110px 1666px #FFF , 835px 747px #FFF , 112px 95px #FFF , 604px 712px #FFF , 1121px 1752px #FFF , 393px 1782px #FFF , 1869px 830px #FFF , 1303px 348px #FFF , 427px 1546px #FFF , 761px 718px #FFF , 946px 674px #FFF , 832px 964px #FFF , 1607px 2000px #FFF , 1624px 1296px #FFF , 1093px 735px #FFF , 1865px 608px #FFF , 933px 1278px #FFF , 1402px 547px #FFF , 1865px 1211px #FFF , 109px 72px #FFF , 249px 1482px #FFF , 586px 1933px #FFF , 911px 1336px #FFF , 697px 853px #FFF , 987px 1797px #FFF , 1371px 933px #FFF , 492px 1896px #FFF , 998px 1866px #FFF , 518px 31px #FFF , 1873px 372px #FFF , 1025px 1308px #FFF , 1478px 965px #FFF , 1934px 934px #FFF , 1048px 1262px #FFF , 1839px 40px #FFF , 1399px 732px #FFF , 735px 416px #FFF , 621px 394px #FFF , 788px 1802px #FFF , 1918px 307px #FFF , 432px 1845px #FFF , 616px 481px #FFF , 921px 798px #FFF , 354px 597px #FFF , 1622px 214px #FFF , 1349px 1983px #FFF , 1033px 1622px #FFF , 1198px 407px #FFF , 1239px 1449px #FFF , 1278px 1978px #FFF , 426px 1264px #FFF , 507px 1341px #FFF , 1956px 818px #FFF , 1041px 277px #FFF , 1371px 639px #FFF , 1224px 419px #FFF , 211px 1106px #FFF , 847px 656px #FFF , 534px 1891px #FFF , 1289px 823px #FFF , 906px 482px #FFF , 347px 1837px #FFF , 1246px 1462px #FFF , 915px 1858px #FFF , 559px 1320px #FFF , 77px 1555px #FFF , 845px 1743px #FFF , 313px 1414px #FFF , 188px 252px #FFF , 509px 637px #FFF , 374px 142px #FFF , 1397px 474px #FFF , 458px 1197px #FFF , 292px 619px #FFF , 1749px 14px #FFF , 1638px 24px #FFF , 563px 1752px #FFF , 1940px 1065px #FFF , 1145px 1030px #FFF , 894px 1470px #FFF , 444px 32px #FFF , 1341px 1136px #FFF , 1941px 412px #FFF , 1328px 785px #FFF , 161px 1740px #FFF , 948px 829px #FFF , 933px 823px #FFF , 1709px 507px #FFF , 1366px 1821px #FFF , 720px 731px #FFF , 162px 682px #FFF , 1684px 882px #FFF , 134px 497px #FFF , 1659px 1701px #FFF , 1186px 446px #FFF , 911px 1435px #FFF , 1814px 1028px #FFF , 1234px 1520px #FFF , 1186px 23px #FFF , 318px 87px #FFF , 1179px 837px #FFF , 1071px 46px #FFF , 1125px 1862px #FFF , 94px 261px #FFF , 1574px 282px #FFF , 1039px 815px #FFF , 1776px 1472px #FFF , 867px 473px #FFF , 901px 215px #FFF , 862px 630px #FFF , 1480px 1673px #FFF , 411px 1896px #FFF , 1335px 944px #FFF , 148px 1235px #FFF , 57px 140px #FFF , 447px 651px #FFF , 1414px 1651px #FFF , 209px 1770px #FFF , 1800px 1590px #FFF , 1304px 1px #FFF , 279px 771px #FFF , 1770px 1398px #FFF , 724px 1201px #FFF , 245px 1145px #FFF , 172px 1951px #FFF , 284px 236px #FFF , 1905px 1307px #FFF , 1948px 574px #FFF , 283px 669px #FFF , 247px 384px #FFF , 224px 619px #FFF , 128px 772px #FFF , 1698px 1405px #FFF , 830px 505px #FFF , 1938px 397px #FFF , 1772px 1001px #FFF , 1454px 808px #FFF , 304px 561px #FFF , 1321px 966px #FFF , 735px 1368px #FFF , 894px 345px #FFF , 1217px 1997px #FFF , 892px 1342px #FFF , 353px 379px #FFF , 1382px 1156px #FFF , 164px 1239px #FFF , 1268px 1859px #FFF , 1385px 1721px #FFF , 16px 283px #FFF , 1819px 200px #FFF , 660px 1111px #FFF , 1679px 1728px #FFF , 463px 596px #FFF , 217px 1834px #FFF , 1879px 538px #FFF , 304px 906px #FFF , 1327px 1347px #FFF , 1226px 1579px #FFF , 1786px 1616px #FFF , 1234px 1982px #FFF , 1868px 1862px #FFF , 814px 948px #FFF , 178px 1837px #FFF , 571px 1701px #FFF , 106px 566px #FFF , 270px 925px #FFF , 1417px 248px #FFF , 609px 1551px #FFF , 992px 1825px #FFF , 1515px 1999px #FFF , 1167px 914px #FFF , 1698px 490px #FFF , 189px 1463px #FFF , 928px 612px #FFF , 1714px 803px #FFF , 535px 402px #FFF , 1000px 379px #FFF , 1610px 574px #FFF , 1882px 1155px #FFF , 1425px 1514px #FFF , 417px 1987px #FFF , 1681px 1059px #FFF , 841px 762px #FFF , 1886px 1098px #FFF , 1785px 236px #FFF , 1950px 950px #FFF , 444px 1937px #FFF , 1364px 540px #FFF , 1971px 225px #FFF , 1624px 868px #FFF , 869px 640px #FFF , 1637px 559px #FFF , 20px 823px #FFF , 409px 177px #FFF , 1804px 1626px #FFF , 388px 527px #FFF , 1385px 1734px #FFF , 988px 1310px #FFF , 443px 599px #FFF , 1780px 434px #FFF , 654px 419px #FFF , 268px 1424px #FFF , 1971px 40px #FFF , 360px 1834px #FFF , 875px 1930px #FFF , 1866px 1885px #FFF , 453px 1670px #FFF , 1696px 1337px #FFF , 604px 1887px #FFF , 1405px 769px #FFF , 1546px 897px #FFF , 595px 1975px #FFF , 32px 1765px #FFF , 896px 1150px #FFF , 1818px 95px #FFF , 444px 49px #FFF , 589px 1796px #FFF , 764px 1965px #FFF , 920px 1803px #FFF , 403px 1997px #FFF , 833px 1282px #FFF , 1127px 1770px #FFF , 1810px 77px #FFF , 1214px 1102px #FFF , 364px 401px #FFF , 1139px 1191px #FFF , 916px 1907px #FFF , 870px 290px #FFF , 688px 678px #FFF , 1523px 34px #FFF , 1265px 1082px #FFF , 1394px 1080px #FFF , 1787px 1738px #FFF , 1682px 755px #FFF , 1955px 832px #FFF , 546px 1577px #FFF , 1062px 1561px #FFF , 344px 826px #FFF , 1442px 782px #FFF , 467px 1477px #FFF , 879px 1439px #FFF , 1672px 268px #FFF , 1317px 1355px #FFF , 1980px 1965px #FFF , 688px 1465px #FFF , 1131px 872px #FFF , 1301px 1656px #FFF , 974px 583px #FFF , 1613px 1467px #FFF , 1976px 1995px #FFF , 1377px 760px #FFF , 1367px 387px #FFF , 1880px 191px #FFF , 711px 876px #FFF , 539px 152px #FFF , 545px 1809px #FFF , 920px 970px #FFF , 1154px 1355px #FFF , 1968px 94px #FFF , 1703px 490px #FFF , 380px 146px #FFF , 1561px 785px #FFF , 1930px 1385px #FFF , 519px 1091px #FFF , 269px 570px #FFF , 109px 1326px #FFF , 1476px 969px #FFF , 1999px 1885px #FFF , 341px 1238px #FFF , 1105px 1076px #FFF , 596px 88px #FFF , 937px 492px #FFF , 1339px 1673px #FFF , 1967px 762px #FFF , 65px 952px #FFF , 111px 93px #FFF , 1011px 1684px #FFF , 377px 1430px #FFF , 1011px 386px #FFF , 1162px 421px #FFF , 196px 617px #FFF , 1407px 1141px #FFF , 1562px 572px #FFF , 316px 690px #FFF , 1600px 1980px #FFF , 1545px 1254px #FFF , 680px 1120px #FFF , 575px 1284px #FFF , 179px 1470px #FFF , 1496px 1506px #FFF , 977px 1376px #FFF , 1282px 708px #FFF , 408px 1427px #FFF , 1173px 1597px #FFF , 1120px 1755px #FFF , 974px 520px #FFF , 979px 384px #FFF , 622px 1116px #FFF , 1307px 866px #FFF , 1188px 1596px #FFF , 858px 1947px #FFF , 861px 1373px #FFF , 857px 43px #FFF , 1878px 499px #FFF , 1297px 535px #FFF , 870px 1286px #FFF , 1452px 448px #FFF , 906px 72px #FFF , 1450px 872px #FFF , 1607px 1755px #FFF , 1071px 1959px #FFF , 976px 879px #FFF , 1435px 284px #FFF , 1601px 496px #FFF , 671px 1713px #FFF , 356px 1148px #FFF , 837px 867px #FFF , 246px 858px #FFF , 1031px 1594px #FFF , 571px 214px #FFF , 1012px 1329px #FFF , 1566px 1142px #FFF , 219px 1376px #FFF , 1580px 1454px #FFF , 690px 1037px #FFF , 1940px 756px #FFF , 1755px 850px #FFF , 1037px 363px #FFF , 25px 515px #FFF , 806px 1571px #FFF , 1266px 1398px #FFF , 695px 791px #FFF , 1838px 950px #FFF , 1578px 27px #FFF , 1692px 1581px #FFF , 1817px 1040px #FFF , 1781px 238px #FFF , 1052px 895px #FFF , 398px 440px #FFF , 1643px 325px #FFF , 79px 848px #FFF , 1295px 326px #FFF , 293px 81px #FFF , 1202px 1580px #FFF , 1441px 100px #FFF , 1295px 1465px #FFF , 1132px 1275px #FFF , 774px 704px #FFF , 1109px 1546px #FFF , 557px 1390px #FFF , 1253px 1224px #FFF , 1063px 1618px #FFF , 1793px 440px #FFF , 890px 1988px #FFF , 814px 424px #FFF , 1390px 1280px #FFF , 1127px 907px #FFF , 1044px 1368px #FFF , 1317px 876px #FFF , 762px 638px #FFF , 965px 747px #FFF , 755px 1945px #FFF , 706px 414px #FFF , 1842px 1673px #FFF , 1158px 1336px #FFF , 989px 1955px #FFF , 1857px 89px #FFF , 1659px 343px #FFF , 509px 1385px #FFF , 1620px 758px #FFF , 1958px 1064px #FFF , 178px 341px #FFF , 1500px 808px #FFF , 20px 1646px #FFF , 1572px 870px #FFF , 1821px 1377px #FFF , 328px 1965px #FFF , 903px 616px #FFF , 1731px 1599px #FFF , 267px 856px #FFF;
        }

        #stars2 {
            width: 2px;
            height: 2px;
            background: transparent;
            box-shadow:2322px 1852px #fff , 2022px 1473px #fff , 2262px 1006px #fff , 2372px 1286px #fff , 2402px 1385px #fff , 2672px 1562px #fff , 2372px 1478px #fff , 2420px 1592px #fff , 2222px 1590px #fff , 2300px 1950px #fff , 2322px 900px #fff , 2022px 400px #fff , 2262px 360px #fff , 2372px 780px #fff , 2402px 338px #fff , 2672px 300px #fff , 2372px 666px #fff , 2420px 888px #fff , 2222px 500px #fff , 2300px 200px #fff , 2200px 200px #fff , 2098px 550px #fff , 921px 1554px #FFF , 1944px 550px #FFF , 1696px 1632px #FFF , 16px 1899px #FFF , 1894px 130px #FFF , 77px 262px #FFF , 22px 1159px #FFF , 933px 1206px #FFF , 1660px 482px #FFF , 1067px 1154px #FFF , 468px 625px #FFF , 1408px 1687px #FFF , 153px 1200px #FFF , 887px 1966px #FFF , 1260px 514px #FFF , 1167px 1158px #FFF , 790px 553px #FFF , 1103px 758px #FFF , 226px 1028px #FFF , 1340px 1760px #FFF , 1712px 528px #FFF , 114px 1693px #FFF , 185px 572px #FFF , 1566px 1793px #FFF , 317px 1501px #FFF , 846px 530px #FFF , 1585px 1437px #FFF , 1335px 1009px #FFF , 1768px 436px #FFF , 1131px 666px #FFF , 27px 1543px #FFF , 1778px 1861px #FFF , 1496px 30px #FFF , 1359px 1226px #FFF , 416px 135px #FFF , 1675px 673px #FFF , 296px 524px #FFF , 432px 1822px #FFF , 1995px 416px #FFF , 1206px 1846px #FFF , 542px 603px #FFF , 1811px 1083px #FFF , 1125px 1900px #FFF , 4px 1410px #FFF , 665px 1674px #FFF , 982px 365px #FFF , 809px 534px #FFF , 116px 1381px #FFF , 727px 439px #FFF , 1674px 1407px #FFF , 976px 1762px #FFF , 1585px 28px #FFF , 1916px 624px #FFF , 1716px 1118px #FFF , 1022px 177px #FFF , 807px 619px #FFF , 1657px 338px #FFF , 1608px 1259px #FFF , 405px 1890px #FFF , 433px 1978px #FFF , 1457px 1495px #FFF , 175px 989px #FFF , 850px 1044px #FFF , 170px 444px #FFF , 1623px 71px #FFF , 977px 1319px #FFF , 440px 464px #FFF , 51px 1209px #FFF , 783px 1274px #FFF , 1296px 244px #FFF , 1260px 94px #FFF , 652px 905px #FFF , 805px 1307px #FFF , 947px 822px #FFF , 384px 268px #FFF , 1856px 1782px #FFF , 459px 1844px #FFF , 1679px 473px #FFF , 673px 1832px #FFF , 96px 345px #FFF , 1268px 428px #FFF , 788px 1138px #FFF , 1242px 867px #FFF , 652px 831px #FFF , 993px 1706px #FFF , 1337px 64px #FFF , 1092px 624px #FFF , 674px 1344px #FFF , 1036px 405px #FFF , 996px 1371px #FFF , 1906px 1410px #FFF , 1285px 1079px #FFF , 1756px 583px #FFF , 404px 380px #FFF , 1739px 1620px #FFF , 1253px 372px #FFF , 520px 620px #FFF , 1842px 852px #FFF , 490px 387px #FFF , 1251px 143px #FFF , 1814px 537px #FFF , 1405px 623px #FFF , 1236px 1186px #FFF , 1286px 896px #FFF , 1626px 990px #FFF , 31px 1067px #FFF , 1288px 939px #FFF , 763px 338px #FFF , 713px 1515px #FFF , 859px 1621px #FFF , 1720px 1984px #FFF , 796px 1743px #FFF , 1439px 1587px #FFF , 965px 412px #FFF , 775px 1168px #FFF , 1192px 956px #FFF , 368px 1075px #FFF , 1484px 1154px #FFF , 1784px 547px #FFF , 815px 675px #FFF , 1387px 890px #FFF , 1665px 1733px #FFF , 1948px 429px #FFF , 1665px 92px #FFF , 1806px 919px #FFF , 1712px 494px #FFF , 577px 1922px #FFF , 820px 1228px #FFF , 678px 1745px #FFF , 1421px 586px #FFF , 788px 208px #FFF , 380px 250px #FFF , 748px 977px #FFF , 1637px 337px #FFF , 851px 1514px #FFF , 1487px 1410px #FFF , 1776px 710px #FFF , 544px 453px #FFF , 1707px 1932px #FFF , 1121px 1642px #FFF , 1227px 391px #FFF , 583px 833px #FFF , 658px 278px #FFF , 345px 1388px #FFF , 1529px 1419px #FFF , 233px 1008px #FFF , 892px 943px #FFF , 1431px 1091px #FFF , 1524px 316px #FFF , 1547px 192px #FFF , 976px 36px #FFF , 1648px 1053px #FFF , 1833px 1572px #FFF , 1677px 936px #FFF , 589px 1755px #FFF , 978px 1875px #FFF , 1508px 412px #FFF , 1242px 439px #FFF , 1263px 40px #FFF , 1427px 1736px #FFF , 639px 906px #FFF , 1349px 373px #FFF , 1055px 969px #FFF , 602px 95px #FFF , 224px 1805px #FFF , 1129px 837px #FFF , 1110px 1358px #FFF , 1067px 1752px #FFF , 391px 1389px #FFF , 885px 1979px #FFF , 1188px 414px #FFF , 1931px 325px #FFF , 1853px 1918px #FFF , 636px 1313px #FFF , 1236px 1913px #FFF , 1801px 780px #FFF , 633px 529px #FFF , 1500px 33px #FFF , 1387px 1045px #FFF , 832px 1281px #FFF , 1880px 1845px #FFF , 1477px 1096px #FFF , 1457px 698px #FFF , 1658px 1049px #FFF , 1957px 1151px #FFF , 1561px 1593px #FFF , 627px 250px #FFF , 975px 1575px #FFF , 68px 998px #FFF , 951px 85px #FFF , 280px 431px #FFF , 1683px 1745px #FFF , 322px 778px #FFF , 841px 888px #FFF , 1895px 1883px #FFF , 700px 568px #FFF , 1846px 442px #FFF , 91px 1650px #FFF , 970px 917px #FFF , 1585px 452px #FFF;
            animation: animStar 100s linear infinite;
        }
        #stars2:after {
            content: " ";
            position: absolute;
            top: 2000px;
            width: 2px;
            height: 2px;
            background: transparent;
            box-shadow:2322px 900px #fff , 2022px 400px #fff , 2262px 360px #fff , 2372px 780px #fff , 2402px 338px #fff , 2672px 300px #fff , 2122px 300px #fff , 2372px 666px #fff , 2420px 888px #fff , 2222px 500px #fff , 2300px 200px #fff , 2200px 200px #fff , 2098px 550px #fff , 921px 1554px #FFF , 1944px 550px #FFF , 1696px 1632px #FFF , 16px 1899px #FFF , 1894px 130px #FFF , 77px 262px #FFF , 22px 1159px #FFF , 933px 1206px #FFF , 1660px 482px #FFF , 1067px 1154px #FFF , 468px 625px #FFF , 1408px 1687px #FFF , 153px 1200px #FFF , 887px 1966px #FFF , 1260px 514px #FFF , 1167px 1158px #FFF , 790px 553px #FFF , 1103px 758px #FFF , 226px 1028px #FFF , 1340px 1760px #FFF , 1712px 528px #FFF , 114px 1693px #FFF , 185px 572px #FFF , 1566px 1793px #FFF , 317px 1501px #FFF , 846px 530px #FFF , 1585px 1437px #FFF , 1335px 1009px #FFF , 1768px 436px #FFF , 1131px 666px #FFF , 27px 1543px #FFF , 1778px 1861px #FFF , 1496px 30px #FFF , 1359px 1226px #FFF , 416px 135px #FFF , 1675px 673px #FFF , 296px 524px #FFF , 432px 1822px #FFF , 1995px 416px #FFF , 1206px 1846px #FFF , 542px 603px #FFF , 1811px 1083px #FFF , 1125px 1900px #FFF , 4px 1410px #FFF , 665px 1674px #FFF , 982px 365px #FFF , 809px 534px #FFF , 116px 1381px #FFF , 727px 439px #FFF , 1674px 1407px #FFF , 976px 1762px #FFF , 1585px 28px #FFF , 1916px 624px #FFF , 1716px 1118px #FFF , 1022px 177px #FFF , 807px 619px #FFF , 1657px 338px #FFF , 1608px 1259px #FFF , 405px 1890px #FFF , 433px 1978px #FFF , 1457px 1495px #FFF , 175px 989px #FFF , 850px 1044px #FFF , 170px 444px #FFF , 1623px 71px #FFF , 977px 1319px #FFF , 440px 464px #FFF , 51px 1209px #FFF , 783px 1274px #FFF , 1296px 244px #FFF , 1260px 94px #FFF , 652px 905px #FFF , 805px 1307px #FFF , 947px 822px #FFF , 384px 268px #FFF , 1856px 1782px #FFF , 459px 1844px #FFF , 1679px 473px #FFF , 673px 1832px #FFF , 96px 345px #FFF , 1268px 428px #FFF , 788px 1138px #FFF , 1242px 867px #FFF , 652px 831px #FFF , 993px 1706px #FFF , 1337px 64px #FFF , 1092px 624px #FFF , 674px 1344px #FFF , 1036px 405px #FFF , 996px 1371px #FFF , 1906px 1410px #FFF , 1285px 1079px #FFF , 1756px 583px #FFF , 404px 380px #FFF , 1739px 1620px #FFF , 1253px 372px #FFF , 520px 620px #FFF , 1842px 852px #FFF , 490px 387px #FFF , 1251px 143px #FFF , 1814px 537px #FFF , 1405px 623px #FFF , 1236px 1186px #FFF , 1286px 896px #FFF , 1626px 990px #FFF , 31px 1067px #FFF , 1288px 939px #FFF , 763px 338px #FFF , 713px 1515px #FFF , 859px 1621px #FFF , 1720px 1984px #FFF , 796px 1743px #FFF , 1439px 1587px #FFF , 965px 412px #FFF , 775px 1168px #FFF , 1192px 956px #FFF , 368px 1075px #FFF , 1484px 1154px #FFF , 1784px 547px #FFF , 815px 675px #FFF , 1387px 890px #FFF , 1665px 1733px #FFF , 1948px 429px #FFF , 1665px 92px #FFF , 1806px 919px #FFF , 1712px 494px #FFF , 577px 1922px #FFF , 820px 1228px #FFF , 678px 1745px #FFF , 1421px 586px #FFF , 788px 208px #FFF , 380px 250px #FFF , 748px 977px #FFF , 1637px 337px #FFF , 851px 1514px #FFF , 1487px 1410px #FFF , 1776px 710px #FFF , 544px 453px #FFF , 1707px 1932px #FFF , 1121px 1642px #FFF , 1227px 391px #FFF , 583px 833px #FFF , 658px 278px #FFF , 345px 1388px #FFF , 1529px 1419px #FFF , 233px 1008px #FFF , 892px 943px #FFF , 1431px 1091px #FFF , 1524px 316px #FFF , 1547px 192px #FFF , 976px 36px #FFF , 1648px 1053px #FFF , 1833px 1572px #FFF , 1677px 936px #FFF , 589px 1755px #FFF , 978px 1875px #FFF , 1508px 412px #FFF , 1242px 439px #FFF , 1263px 40px #FFF , 1427px 1736px #FFF , 639px 906px #FFF , 1349px 373px #FFF , 1055px 969px #FFF , 602px 95px #FFF , 224px 1805px #FFF , 1129px 837px #FFF , 1110px 1358px #FFF , 1067px 1752px #FFF , 391px 1389px #FFF , 885px 1979px #FFF , 1188px 414px #FFF , 1931px 325px #FFF , 1853px 1918px #FFF , 636px 1313px #FFF , 1236px 1913px #FFF , 1801px 780px #FFF , 633px 529px #FFF , 1500px 33px #FFF , 1387px 1045px #FFF , 832px 1281px #FFF , 1880px 1845px #FFF , 1477px 1096px #FFF , 1457px 698px #FFF , 1658px 1049px #FFF , 1957px 1151px #FFF , 1561px 1593px #FFF , 627px 250px #FFF , 975px 1575px #FFF , 68px 998px #FFF , 951px 85px #FFF , 280px 431px #FFF , 1683px 1745px #FFF , 322px 778px #FFF , 841px 888px #FFF , 1895px 1883px #FFF , 700px 568px #FFF , 1846px 442px #FFF , 91px 1650px #FFF , 970px 917px #FFF , 1585px 452px #FFF;
        }

        #stars3 {
            width: 3px;
            height: 3px;
            background: transparent;
            box-shadow: 2077px 1745px #FFF , 2166px 1685px #FFF , 2058px 1257px #FFF , 2167px 1025px #FFF , 2279px 1328px #FFF , 2324px 1854px #FFF , 2359px 1685px #FFF , 2279px 1584px #FFF , 2079px 1408px #FFF , 1679px 1408px #FFF , 2077px 595px #FFF , 2166px 753px #FFF , 2058px 156px #FFF , 2167px 286px #FFF , 2279px 528px #FFF , 2324px 457px #FFF , 2359px 648px #FFF , 2279px 408px #FFF , 2079px 1408px #FFF , 1679px 1408px #FFF , 1970px 1504px #FFF , 1789px 965px #FFF , 698px 234px #FFF , 1733px 1854px #FFF , 1060px 271px #FFF , 719px 1744px #FFF , 1707px 1847px #FFF , 1710px 432px #FFF , 1325px 1585px #FFF , 92px 577px #FFF , 163px 1938px #FFF , 1885px 123px #FFF , 1566px 1753px #FFF , 1288px 21px #FFF , 1396px 1908px #FFF , 675px 1466px #FFF , 734px 1557px #FFF , 941px 1885px #FFF , 1692px 6px #FFF , 115px 1183px #FFF , 639px 1044px #FFF , 1171px 1982px #FFF , 1801px 1078px #FFF , 648px 820px #FFF , 1885px 1984px #FFF , 268px 1729px #FFF , 1388px 181px #FFF , 1741px 1280px #FFF , 1719px 1080px #FFF , 12px 932px #FFF , 489px 157px #FFF , 1910px 790px #FFF , 115px 44px #FFF , 1748px 1458px #FFF , 282px 109px #FFF , 1100px 1528px #FFF , 543px 598px #FFF , 1320px 1188px #FFF , 1124px 839px #FFF , 1406px 1289px #FFF , 472px 1376px #FFF , 852px 286px #FFF , 510px 860px #FFF , 700px 306px #FFF , 1822px 1302px #FFF , 15px 19px #FFF , 1360px 420px #FFF , 1483px 42px #FFF , 1287px 1867px #FFF , 1105px 1322px #FFF , 745px 161px #FFF , 431px 1722px #FFF , 855px 1254px #FFF , 860px 1784px #FFF , 1578px 1955px #FFF , 1085px 461px #FFF , 472px 690px #FFF , 23px 1152px #FFF , 1625px 601px #FFF , 1177px 1692px #FFF , 397px 1984px #FFF , 10px 1164px #FFF , 1132px 1557px #FFF , 438px 817px #FFF , 1590px 1236px #FFF , 1037px 1616px #FFF , 533px 941px #FFF , 1163px 1992px #FFF , 1451px 1081px #FFF , 1335px 1578px #FFF , 503px 1556px #FFF , 197px 1725px #FFF , 511px 1397px #FFF , 1514px 1164px #FFF , 1249px 148px #FFF , 947px 1849px #FFF , 1258px 1426px #FFF , 255px 1937px #FFF , 23px 529px #FFF , 578px 230px #FFF , 925px 767px #FFF , 903px 365px #FFF , 1861px 451px #FFF , 1813px 912px #FFF , 1597px 637px #FFF , 195px 626px #FFF , 130px 404px #FFF , 725px 408px #FFF , 1916px 843px #FFF , 1336px 239px #FFF , 1568px 1390px #FFF , 139px 126px #FFF , 1287px 1271px #FFF , 731px 465px #FFF , 1959px 1465px #FFF , 909px 169px #FFF , 838px 1332px #FFF , 464px 1037px #FFF , 1893px 233px #FFF;
            animation: animStar 150s linear infinite;
        }
        #stars3:after {
            content: " ";
            position: absolute;
            top: 2000px;
            width: 3px;
            height: 3px;
            background: transparent;
            box-shadow:2077px 595px #FFF , 2166px 753px #FFF , 2058px 156px #FFF , 2167px 286px #FFF , 2279px 528px #FFF , 2324px 457px #FFF , 2359px 648px #FFF , 2279px 408px #FFF , 2079px 1408px #FFF ,  1679px 1408px #FFF , 1970px 1504px #FFF , 1789px 965px #FFF , 698px 234px #FFF , 1733px 1854px #FFF , 1060px 271px #FFF , 719px 1744px #FFF , 1707px 1847px #FFF , 1710px 432px #FFF , 1325px 1585px #FFF , 92px 577px #FFF , 163px 1938px #FFF , 1885px 123px #FFF , 1566px 1753px #FFF , 1288px 21px #FFF , 1396px 1908px #FFF , 675px 1466px #FFF , 734px 1557px #FFF , 941px 1885px #FFF , 1692px 6px #FFF , 115px 1183px #FFF , 639px 1044px #FFF , 1171px 1982px #FFF , 1801px 1078px #FFF , 648px 820px #FFF , 1885px 1984px #FFF , 268px 1729px #FFF , 1388px 181px #FFF , 1741px 1280px #FFF , 1719px 1080px #FFF , 12px 932px #FFF , 489px 157px #FFF , 1910px 790px #FFF , 115px 44px #FFF , 1748px 1458px #FFF , 282px 109px #FFF , 1100px 1528px #FFF , 543px 598px #FFF , 1320px 1188px #FFF , 1124px 839px #FFF , 1406px 1289px #FFF , 472px 1376px #FFF , 852px 286px #FFF , 510px 860px #FFF , 700px 306px #FFF , 1822px 1302px #FFF , 15px 19px #FFF , 1360px 420px #FFF , 1483px 42px #FFF , 1287px 1867px #FFF , 1105px 1322px #FFF , 745px 161px #FFF , 431px 1722px #FFF , 855px 1254px #FFF , 860px 1784px #FFF , 1578px 1955px #FFF , 1085px 461px #FFF , 472px 690px #FFF , 23px 1152px #FFF , 1625px 601px #FFF , 1177px 1692px #FFF , 397px 1984px #FFF , 10px 1164px #FFF , 1132px 1557px #FFF , 438px 817px #FFF , 1590px 1236px #FFF , 1037px 1616px #FFF , 533px 941px #FFF , 1163px 1992px #FFF , 1451px 1081px #FFF , 1335px 1578px #FFF , 503px 1556px #FFF , 197px 1725px #FFF , 511px 1397px #FFF , 1514px 1164px #FFF , 1249px 148px #FFF , 947px 1849px #FFF , 1258px 1426px #FFF , 255px 1937px #FFF , 23px 529px #FFF , 578px 230px #FFF , 925px 767px #FFF , 903px 365px #FFF , 1861px 451px #FFF , 1813px 912px #FFF , 1597px 637px #FFF , 195px 626px #FFF , 130px 404px #FFF , 725px 408px #FFF , 1916px 843px #FFF , 1336px 239px #FFF , 1568px 1390px #FFF , 139px 126px #FFF , 1287px 1271px #FFF , 731px 465px #FFF , 1959px 1465px #FFF , 909px 169px #FFF , 838px 1332px #FFF , 464px 1037px #FFF , 1893px 233px #FFF;
        }


        @keyframes animStar {
            from {
                transform: translateY(0px);
            }
            to {
                transform: translateY(1000px);
            }
        }
        /********************************************/
    .bg1{
        width: 100%;
        height: 100%;
    }

    @keyframes text {
        from{
            display: none;
            opacity: 0;
        }
        to{
            opacity: 1;
            display: block;
        }
    }
    .content{
        width:100%;
        height:100%;
        z-index:1;
        animation: text 4s ease-in;
    }
     .bg1_container{
        width: 100%;
        height: 100%;
        position: relative;
        background:#000;
        z-index:1;
        background: linear-gradient( #000000 0%, #333333 100%);
    }

    .bg1_container .star{
        width:100%;
        height:95%;
        overflow: hidden;
        z-index:1;
        /*z-index: 5;*/
    }
    .bg1_container .drap{
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index:10;
        animation-name: drap;
        /*zoom: 1;*/
    }
    @keyframes drap {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }


    .bg1_container .drap .drap_title{
        position: absolute;
        top: 60%;
        left: 50%;
        width:400px;
        transform: translate(-50%,-50%);
        animation-name: drap;
        flex-wrap: wrap;
        text-align: center;
    }
    .bg1_container .drap .drap_title .jw_security{
        background: linear-gradient( #919191 0%, #ffffff 100%);
        color:transparent;
        -webkit-background-clip: text;
        font-size:30px;
        line-height: 30px;
        letter-spacing: 30px;
        margin-right: -30px;
        font-weight: 200;
        text-align: center;
    }
    .bg1_container .drap .drap_title p:last-child{
        background: linear-gradient( #087027 0%,#27b651 100%);
        color:transparent;
        -webkit-background-clip: text;
        font-size: 12px;
        letter-spacing: 12px;
        margin-bottom:0;
        font-weight: 1000;
        text-align: center;
    }
    .bg1_container .bg1_footer{
        position: absolute;
        bottom:-1px;
        width: 100%;
        height:15%;
    }
    .bg1_container .bg1_footer img{
        width:100%;
        height:100%;
    }
</style>
</head>
<body class="out">
        <div class="section section_1 bg1" style="background-color: #000;">
            <!--/*    ******************************** div 开场特效********************************** */-->
            <div id="light"></div>
            <div id="wave"></div>

            <div class="content">
                <div class="bg1_container">
                    <div class="star">
                        <div id='stars'></div>
                        <div id='stars2'></div>
                        <div id='stars3'></div>
                    </div>
                    <div class='drap flex animated'>
                        <img src="view/img/draps.png" alt="">
                        <div class="drap_title flex animated">
                            <p class="jw_security">11111111111111111111</p>
                            <p>2222222222222222</p>
                        </div>
                    </div>
                    <div class="bg1_footer">
                        <img src="view/img/110.png">
                    </div>
                </div>
            </div>
            <div id="ringgroup">
                <div class="ring"></div>
                <div class="ring"></div>
                <div class="ring"></div>
                <div class="ring"></div>
            </div>
        </div>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){

    startdelay = 300;
    coredelay = 500;
    maindelay = 730;
    setTimeout("$('#ringgroup').addClass('pass');$('#light').addClass('pass');",startdelay);
    setTimeout("$('#light').addClass('passed');$('#wave').addClass('pass');",startdelay + coredelay);
    setTimeout("$('body').removeClass('out').addClass('in')", startdelay + coredelay + maindelay);

});
</script>
</body>
</html>

 

 

冷色系微风爱丶
关注
专栏目录
html中做开场动画,实例CSS3开场动画的制作与优化_html/css_WEB-ITnose
weixin_42513448的博客
06-07 1755
素材：期望效果： http://v.youku.com/v_show/id_XMjY2NTc1MzYw.html一开始需要制作这个动画的时候，其实我是拒绝的，因为单凭这几个素材，即便我对动画了如指掌，也是无从下手的。后来有一天，我见到了wow军团再临的CG动画，脑海中突然灵光一闪，便出现了这样的构思：“穿越重重的云层，伴随着白天到黑夜的转化，logo从遥远的地方出现，随后往屏幕方向快速移动，在lo...
html怎么设置出场动画,css3炫酷coming soon分步显示动画特效
weixin_35640673的博客
06-09 974
这是一款效果十分炫酷的css3 coming soon分步显示动画特效。EXAMPLE 1第一个demo是一个coming soon分步显示动画特效。html结构：创建一个class为sp-container的div作为包裹容器。在其中sp-content为主要显示区域，里面包含多个sp-row。每一个sp-row是一个“动画场景”，里面放置各种图片。sp-side是最后显示的提交表单。 ...
html 全场开场动画,HTML5 星际大战电影开场字幕动画
weixin_39738774的博客
06-09 466
JavaScript语言：JaveScriptBabelCoffeeScript确定//////////////// STAR BACKGROUNDwindow.onload = function() {// Creating the Canvasvar canvas = document.createElement("canvas"),c = canvas.getContext("2d"),pa...
Canvas + CSS3实现可视化项目开场动画
localhost_1314的博客
07-18 1252
一、背景： 在最近的可视化项目中，视觉设计采用钢铁的写实风格，整体页面布局为左中右，动效需要实现在刚进入页面时，左右板块撞向中间板块，产生撞击光效和火花飞散的动画效果。 二、实现思路： 需要考虑以下几个方面： 整体页面的布局，左中右三个板块需要独立，分别绝对定位，不要耦合在一起； 使用css3实现撞击动效； 使用canvas绘制撞击后的火光和火花，光效可以径向渐变，火花飞舞的运动轨迹分别是左右方向的匀减速运动，上下方向的匀减速和匀加速，最后到飞舞消散的过程，粒子大小随机 三、实现过程： 1.
用HTML5实现动画
最新发布
cnds123的专栏
02-15 6051
要在HTML5中实现动画，可以使用以下几种方法：CSS动画、使用元素和JavaScript来实现动画、使用JavaScript动画库。
jQuery+CSS3打造效果绚丽的跑车开场动画特效.zip
09-25
标题中的"jQuery+CSS3打造效果绚丽的跑车开场动画特效.zip"暗示了这个压缩包包含了一套使用jQuery和CSS3技术实现的动态跑车开场动画。这种特效通常用于网站的首页，以吸引用户注意力，增加用户体验。接下来，我将...
jquery+css3跑车开场动画特效.zip
11-19
在本项目中，“jquery+css3跑车开场动画特效.zip”是一个包含前端技术实现的跑车开场动画特效。这个压缩包文件主要运用了jQuery、CSS3以及HTML5等技术，旨在为网页添加一个吸引人的动态启动效果。接下来，我们将详细...
庆祝抗战胜利70周年开场动画特效代码
03-20
【庆祝抗战胜利70周年开场动画特效代码】是一款利用CSS3技术实现的视觉效果，旨在纪念中国人民抗日战争暨世界反法西斯战争胜利70周年。这个特效设计以红色为主题，象征着革命的热情与胜利的喜悦，通过动态的礼花绽放...
简单窗帘拉开效果网页开场动画特效代码
03-20
本知识点主要关注的是一个基于jQuery库实现的“简单窗帘拉开效果”的网页开场动画特效。这个特效为网站的首页或登录页面提供了新颖的加载方式，使得用户在等待页面加载的同时能享受到有趣且引人入胜的视觉体验。 ...
jQuery+CSS3打造效果绚丽的跑车开场动画特效
06-12
在本文中，我们将深入探讨如何使用jQuery和CSS3来创建一款引人注目的跑车开场动画特效。这个特效不仅展示了HTML5技术的强大功能，还让我们看到了JavaScript库jQuery和CSS3动画相结合所能产生的视觉冲击力。 首先，...
H5酷炫3D开场动画（酷炫又不会占太大内存）
03-24
H5酷炫3D开场动画（酷炫又不会占太大内存）H5酷炫3D开场动画（酷炫又不会占太大内存）H5酷炫3D开场动画（酷炫又不会占太大内存）
网站的开场动画 很不错的哦
06-21
可用于一些网站的开场动画，都是很经典滴哦
css3制作穿越云层开场动画，css3+js
03-22
使用css3制作纯前端开场动画，穿越云层效果。
酷炫的css3淡出淡进显示开场页面动画效果
09-14
酷炫的css3淡出淡进显示开场页面动画效果
使用HTML+CSS实现一个加载页面动画效果
Spray_yellow的博客
09-20 1186
本文是一个简单的前端加载动画样式，使用的技术栈为HTML+CSS
html拉幕flash,FLASH制作开场拉幕动画特效
weixin_30016961的博客
06-17 849
本教程是向大家介绍利用FLASH制作开场拉幕动画特效，制作出来的效果还是挺漂亮的。教程难度不是很大，推荐到脚本之家，希望大家喜欢！一、手绘元件1．打开Flash MX 2004软件，新建一个文件，然后选中菜单下的“插入”→“新建元件”(Ctrl+F8)选项。2．在弹出的“创建新元件”窗口中“名称”后面的框中输入“拉幕”二字，选择“行为”后面的“图形”选项。(简称：创建名为“拉幕”的“图形”元件)3...
【HTML+CSS+JS实现登陆动画效果】
marblue_y的博客
08-27 2979
首先引入外部CSS文件和jquery ↓ <!--CSS--> <link rel="stylesheet" href="style.css"> <!--JQ--> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script&gt...
疫情散去想看电影，使用css3动画实现一个阿凡达2完美开场
xingyu_qie的专栏
12-13 3129
在历经了艰苦卓绝的3年抗疫后，疫情终于还是来了，很多小伙伴变成了小洋人酸奶，我相信过不了多少天，疫情终将散去，那个时候就可以和家人走进电影院啦。今天用css布局一个阿凡达2的影院场景，提前过一过瘾。
csdn unitylogo开场动画
02-03
总的来说，csdn unitylogo开场动画通过巧妙的画面设计、动感十足的特效和激情四溢的音乐，成功地展示了这两个平台的合作精神和创新能力。它不仅吸引了人们的注意力，也让人们对Unity引擎的强大功能和广泛应用领域有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值