아보카도 갠홈 배경 css 효과 질문
본문
개인홈 배경에 유성우가 떨어지는 것처럼 효과를 넣거나, 눈 내리는 것이 아닌 아래에서 위로 천천히 올라가는 효과를 넣고 싶은데 코드를 어떻게 해서 어디에 넣어야 할까요?
후자의 경우에는 설명한 블로그가 있었던 것 같은데 아시는 분 있으신가요?ㅠㅠ
1. http://tkatk.xyz/ (배경 유성우 효과)
2. http://lunatism.com/ (배경 무중력 효과)
답변 5
첫번째 링크는 그냥 이미지 같고
두번째 링크의 /css/style.css 에서
아래 부분 참조하시면 되겠네요.
#stars {
width: 1px;
height: 1px;
background: transparent;
box-shadow: 117px 1613px #FFF , 1488px 635px #FFF , 944px 914px #FFF , 647px 277px #FFF , 1792px 1205px #FFF , 656px 1517px #FFF , 820px 1839px #FFF , 1153px 1400px #FFF , 870px 13px #FFF , 550px 702px #FFF , 1155px 1056px #FFF , 88px 1709px #FFF , 1450px 1090px #FFF , 1929px 457px #FFF , 1390px 905px #FFF , 1771px 269px #FFF , 1741px 669px #FFF , 432px 64px #FFF , 563px 996px #FFF , 1918px 1873px #FFF , 1845px 1211px #FFF , 231px 1503px #FFF , 37px 220px #FFF , 1970px 495px #FFF , 1812px 925px #FFF , 67px 1398px #FFF , 535px 279px #FFF , 1837px 829px #FFF , 1945px 685px #FFF , 1677px 1817px #FFF , 1317px 1415px #FFF , 1785px 905px #FFF , 1787px 1554px #FFF , 802px 1296px #FFF , 512px 1101px #FFF , 583px 1364px #FFF , 336px 558px #FFF , 979px 334px #FFF , 106px 792px #FFF , 204px 34px #FFF , 1845px 1763px #FFF , 445px 1599px #FFF , 386px 453px #FFF , 471px 952px #FFF , 1466px 1676px #FFF , 1885px 303px #FFF , 51px 1717px #FFF , 1211px 299px #FFF , 1546px 1887px #FFF , 1067px 33px #FFF , 1088px 1326px #FFF , 1938px 760px #FFF , 470px 648px #FFF , 1213px 269px #FFF , 1767px 78px #FFF , 977px 976px #FFF , 1926px 175px #FFF , 722px 1512px #FFF , 945px 227px #FFF , 1811px 99px #FFF , 1912px 1406px #FFF , 1602px 1243px #FFF , 610px 449px #FFF , 654px 1393px #FFF , 1930px 1193px #FFF , 258px 1184px #FFF , 89px 265px #FFF , 824px 1494px #FFF , 1506px 1435px #FFF , 1027px 753px #FFF , 1px 1197px #FFF , 530px 1161px #FFF , 864px 1555px #FFF , 1610px 1604px #FFF , 1035px 1114px #FFF , 1456px 133px #FFF , 1196px 1253px #FFF , 361px 1037px #FFF , 834px 351px #FFF , 436px 1676px #FFF , 1194px 1007px #FFF , 1141px 647px #FFF , 319px 454px #FFF , 937px 1769px #FFF , 1872px 1013px #FFF , 733px 643px #FFF , 1250px 511px #FFF , 189px 296px #FFF , 1639px 163px #FFF , 1584px 336px #FFF , 1912px 1343px #FFF , 1298px 1307px #FFF , 1750px 902px #FFF , 1129px 845px #FFF , 1899px 1470px #FFF , 1427px 232px #FFF , 1391px 838px #FFF , 1225px 1819px #FFF , 190px 1366px #FFF , 1865px 518px #FFF , 203px 1383px #FFF , 1455px 614px #FFF , 423px 354px #FFF , 1678px 1790px #FFF , 241px 608px #FFF , 1089px 730px #FFF , 1342px 38px #FFF , 1848px 249px #FFF , 1874px 1785px #FFF , 1040px 1837px #FFF , 751px 261px #FFF , 510px 1975px #FFF , 52px 795px #FFF , 1786px 1310px #FFF , 498px 712px #FFF , 190px 375px #FFF , 1341px 722px #FFF , 43px 1394px #FFF , 1821px 1687px #FFF , 106px 130px #FFF , 1717px 1978px #FFF , 168px 151px #FFF , 183px 740px #FFF , 945px 1381px #FFF , 669px 1170px #FFF , 1285px 1816px #FFF , 110px 1217px #FFF , 1623px 813px #FFF , 869px 647px #FFF , 867px 582px #FFF , 735px 1240px #FFF , 519px 1896px #FFF , 132px 156px #FFF , 1649px 193px #FFF , 241px 1109px #FFF , 643px 484px #FFF , 574px 1282px #FFF , 1952px 564px #FFF , 1978px 145px #FFF , 329px 903px #FFF , 1674px 617px #FFF , 1978px 558px #FFF , 1808px 1715px #FFF , 1526px 1238px #FFF , 475px 1330px #FFF , 810px 425px #FFF , 1709px 634px #FFF , 1658px 336px #FFF , 425px 194px #FFF , 352px 96px #FFF , 148px 180px #FFF , 1139px 1046px #FFF , 1809px 1233px #FFF , 1669px 171px #FFF , 263px 1394px #FFF , 534px 715px #FFF , 396px 1008px #FFF , 589px 1445px #FFF , 1190px 381px #FFF , 1709px 279px #FFF , 520px 891px #FFF , 1136px 1867px #FFF , 1280px 1233px #FFF , 836px 296px #FFF , 1348px 646px #FFF , 1539px 913px #FFF , 423px 781px #FFF , 1271px 1805px #FFF , 696px 564px #FFF , 1549px 804px #FFF , 303px 1555px #FFF , 1449px 1903px #FFF , 66px 687px #FFF , 1164px 856px #FFF , 1958px 1326px #FFF , 125px 157px #FFF , 508px 1669px #FFF , 465px 725px #FFF , 1925px 1440px #FFF , 405px 793px #FFF , 278px 110px #FFF , 1084px 1065px #FFF , 1077px 705px #FFF , 663px 1844px #FFF , 734px 263px #FFF , 870px 1761px #FFF , 103px 1169px #FFF , 1506px 1295px #FFF , 1883px 926px #FFF , 335px 1361px #FFF , 1126px 1284px #FFF , 257px 1165px #FFF , 837px 580px #FFF , 1211px 1362px #FFF , 1137px 1380px #FFF , 135px 632px #FFF , 1491px 1965px #FFF , 1098px 195px #FFF , 506px 417px #FFF , 693px 1243px #FFF , 622px 1862px #FFF , 1412px 1343px #FFF , 948px 1894px #FFF , 1315px 1363px #FFF , 754px 1098px #FFF , 1931px 930px #FFF , 1831px 342px #FFF , 1751px 1839px #FFF , 84px 775px #FFF , 1662px 1488px #FFF , 617px 1769px #FFF , 1869px 1292px #FFF , 963px 432px #FFF , 371px 1114px #FFF , 37px 642px #FFF , 21px 1184px #FFF , 602px 366px #FFF , 414px 524px #FFF , 282px 244px #FFF , 1689px 868px #FFF , 943px 681px #FFF , 898px 679px #FFF , 449px 1774px #FFF , 1678px 1313px #FFF , 475px 1811px #FFF , 1146px 1509px #FFF , 1151px 1863px #FFF , 1617px 846px #FFF , 82px 1077px #FFF , 324px 1317px #FFF , 1516px 885px #FFF , 1706px 1526px #FFF , 1925px 1180px #FFF , 553px 967px #FFF , 1072px 536px #FFF , 1715px 1816px #FFF , 185px 286px #FFF , 1362px 1600px #FFF , 628px 1938px #FFF , 1187px 412px #FFF , 569px 211px #FFF , 1959px 1356px #FFF , 1571px 105px #FFF , 319px 1111px #FFF , 36px 1364px #FFF , 502px 1788px #FFF , 1051px 1993px #FFF , 1617px 773px #FFF , 424px 1507px #FFF , 1623px 1955px #FFF , 307px 662px #FFF , 183px 1048px #FFF , 1919px 1453px #FFF , 1006px 1817px #FFF , 468px 673px #FFF , 1142px 1375px #FFF , 1228px 443px #FFF , 1734px 552px #FFF , 20px 1041px #FFF , 1783px 334px #FFF , 98px 1237px #FFF , 1356px 1940px #FFF , 853px 1779px #FFF , 1910px 560px #FFF , 1174px 1656px #FFF , 110px 1724px #FFF , 542px 1771px #FFF , 1758px 1931px #FFF , 1463px 1401px #FFF , 1155px 84px #FFF , 1504px 835px #FFF , 750px 322px #FFF , 407px 1900px #FFF , 1600px 1141px #FFF , 657px 886px #FFF , 526px 714px #FFF , 18px 836px #FFF , 1546px 1548px #FFF , 22px 469px #FFF , 594px 1466px #FFF , 1160px 1078px #FFF , 627px 1055px #FFF , 195px 699px #FFF , 1099px 684px #FFF , 530px 551px #FFF , 1160px 1325px #FFF , 894px 727px #FFF , 1157px 98px #FFF , 136px 1483px #FFF , 1875px 1975px #FFF , 1803px 566px #FFF , 318px 1073px #FFF , 1866px 1656px #FFF , 543px 414px #FFF , 719px 474px #FFF , 1115px 738px #FFF , 353px 875px #FFF , 184px 1938px #FFF , 1854px 1534px #FFF , 420px 1698px #FFF , 1480px 1550px #FFF , 522px 203px #FFF , 1897px 1904px #FFF , 975px 1708px #FFF , 1774px 602px #FFF , 1908px 274px #FFF , 61px 715px #FFF , 983px 1156px #FFF , 326px 1013px #FFF , 641px 290px #FFF , 1522px 120px #FFF , 405px 1637px #FFF , 1021px 1099px #FFF , 631px 1145px #FFF , 982px 1967px #FFF , 200px 651px #FFF , 795px 351px #FFF , 790px 1082px #FFF , 144px 1572px #FFF , 1542px 901px #FFF , 158px 1524px #FFF , 849px 1843px #FFF , 1807px 203px #FFF , 1747px 45px #FFF , 1603px 1738px #FFF , 617px 1966px #FFF , 342px 748px #FFF , 1779px 1173px #FFF , 1428px 152px #FFF , 589px 1998px #FFF , 1940px 1838px #FFF , 115px 272px #FFF , 1217px 1395px #FFF , 1402px 1491px #FFF , 1833px 1814px #FFF , 243px 966px #FFF , 319px 578px #FFF , 813px 364px #FFF , 669px 882px #FFF , 551px 134px #FFF , 1819px 920px #FFF , 740px 1826px #FFF , 1021px 952px #FFF , 1575px 453px #FFF , 324px 419px #FFF , 929px 417px #FFF , 885px 1112px #FFF , 503px 187px #FFF , 1908px 362px #FFF , 1063px 1601px #FFF , 169px 1792px #FFF , 789px 963px #FFF , 1697px 948px #FFF , 1761px 1810px #FFF , 1844px 1591px #FFF , 1709px 949px #FFF , 1402px 1396px #FFF , 1037px 225px #FFF , 1832px 518px #FFF , 1728px 1782px #FFF , 194px 1421px #FFF , 1395px 742px #FFF , 1478px 1325px #FFF , 40px 593px #FFF , 1732px 117px #FFF , 51px 158px #FFF , 1598px 1672px #FFF , 701px 849px #FFF , 1403px 1979px #FFF , 145px 1414px #FFF , 550px 906px #FFF , 1366px 460px #FFF , 142px 1379px #FFF , 34px 1864px #FFF , 1346px 308px #FFF , 293px 998px #FFF , 21px 1868px #FFF , 540px 1033px #FFF , 60px 746px #FFF , 1602px 1476px #FFF , 180px 804px #FFF , 345px 1982px #FFF , 1439px 640px #FFF , 939px 1834px #FFF , 20px 432px #FFF , 492px 1549px #FFF , 109px 1579px #FFF , 1796px 1403px #FFF , 1079px 519px #FFF , 1664px 389px #FFF , 1627px 1061px #FFF , 823px 419px #FFF , 1399px 1882px #FFF , 1906px 344px #FFF , 1189px 848px #FFF , 117px 882px #FFF , 1262px 33px #FFF , 1048px 434px #FFF , 1208px 1309px #FFF , 1616px 408px #FFF , 1833px 853px #FFF , 1433px 1656px #FFF , 811px 1861px #FFF , 439px 1672px #FFF , 1105px 248px #FFF , 328px 1652px #FFF , 13px 1658px #FFF , 685px 987px #FFF , 985px 403px #FFF , 1664px 1206px #FFF , 1993px 1925px #FFF , 440px 917px #FFF , 1835px 319px #FFF , 1404px 1907px #FFF , 624px 1443px #FFF , 843px 954px #FFF , 478px 1567px #FFF , 895px 1602px #FFF , 1231px 871px #FFF , 1267px 1646px #FFF , 475px 334px #FFF , 784px 796px #FFF , 1294px 199px #FFF , 109px 702px #FFF , 1978px 362px #FFF , 291px 940px #FFF , 971px 1343px #FFF , 74px 719px #FFF , 36px 715px #FFF , 1007px 1423px #FFF , 860px 314px #FFF , 631px 177px #FFF , 1900px 1590px #FFF , 1239px 1348px #FFF , 1346px 1270px #FFF , 1934px 1475px #FFF , 1553px 559px #FFF , 588px 1969px #FFF , 670px 1269px #FFF , 1484px 376px #FFF , 20px 1424px #FFF , 1396px 8px #FFF , 969px 244px #FFF , 1807px 538px #FFF , 1873px 891px #FFF , 636px 1142px #FFF , 1474px 1562px #FFF , 763px 350px #FFF , 663px 700px #FFF , 500px 1469px #FFF , 1302px 722px #FFF , 181px 291px #FFF , 266px 893px #FFF , 1403px 654px #FFF , 492px 460px #FFF , 1503px 1369px #FFF , 23px 1662px #FFF , 349px 333px #FFF , 1435px 1017px #FFF , 1441px 705px #FFF , 1708px 1446px #FFF , 1041px 911px #FFF , 1063px 780px #FFF , 1158px 1356px #FFF , 767px 1454px #FFF , 1912px 797px #FFF , 1731px 1759px #FFF , 1378px 1390px #FFF , 1815px 1364px #FFF , 960px 270px #FFF , 1343px 427px #FFF , 275px 203px #FFF , 1319px 1092px #FFF , 1455px 770px #FFF , 283px 1503px #FFF , 1505px 901px #FFF , 1738px 1561px #FFF , 1526px 1935px #FFF , 1757px 669px #FFF , 1640px 620px #FFF , 1750px 722px #FFF , 748px 66px #FFF , 1149px 540px #FFF , 159px 953px #FFF , 200px 1426px #FFF , 515px 1110px #FFF , 1552px 737px #FFF , 1094px 1459px #FFF , 778px 799px #FFF , 1031px 523px #FFF , 743px 1825px #FFF , 1100px 882px #FFF , 1088px 1836px #FFF , 255px 599px #FFF , 67px 1361px #FFF , 247px 1721px #FFF , 1722px 346px #FFF , 1822px 155px #FFF , 452px 1973px #FFF , 415px 1960px #FFF , 1109px 57px #FFF , 273px 1392px #FFF , 404px 1071px #FFF , 1212px 353px #FFF , 370px 460px #FFF , 795px 1523px #FFF , 1932px 340px #FFF , 51px 1473px #FFF , 1268px 364px #FFF , 1512px 1862px #FFF , 1678px 1801px #FFF , 1796px 579px #FFF , 254px 251px #FFF , 1466px 1717px #FFF , 893px 379px #FFF , 1153px 923px #FFF , 913px 1808px #FFF , 791px 789px #FFF , 417px 1924px #FFF , 1336px 1599px #FFF , 1695px 908px #FFF , 1120px 114px #FFF , 493px 1949px #FFF , 68px 1905px #FFF , 969px 481px #FFF , 1420px 1095px #FFF , 800px 1117px #FFF , 390px 234px #FFF , 356px 1644px #FFF , 1098px 1486px #FFF , 1360px 521px #FFF , 149px 1198px #FFF , 354px 747px #FFF , 1749px 487px #FFF , 470px 76px #FFF , 1672px 289px #FFF , 1731px 545px #FFF , 1547px 1590px #FFF , 498px 692px #FFF , 398px 1592px #FFF , 1846px 1237px #FFF , 1537px 1474px #FFF , 1726px 1374px #FFF , 1922px 858px #FFF , 376px 321px #FFF , 985px 227px #FFF , 234px 1421px #FFF , 760px 745px #FFF , 1990px 1132px #FFF , 1560px 1597px #FFF , 338px 1310px #FFF , 1924px 1664px #FFF , 547px 1747px #FFF , 1639px 1282px #FFF , 1202px 337px #FFF , 1985px 779px #FFF , 737px 456px #FFF , 89px 501px #FFF , 963px 792px #FFF , 655px 1447px #FFF , 1492px 1994px #FFF , 1171px 254px #FFF , 892px 827px #FFF , 1735px 442px #FFF , 1474px 1187px #FFF , 846px 1518px #FFF , 557px 1805px #FFF , 738px 945px #FFF , 795px 68px #FFF , 663px 1956px #FFF , 1607px 290px #FFF , 1524px 15px #FFF , 1097px 1911px #FFF , 157px 1939px #FFF , 935px 1065px #FFF , 1809px 1708px #FFF , 164px 1157px #FFF , 83px 855px #FFF , 625px 501px #FFF , 814px 398px #FFF , 552px 695px #FFF , 597px 1546px #FFF , 1237px 1417px #FFF , 628px 284px #FFF , 866px 767px #FFF , 1403px 1394px #FFF , 765px 1563px #FFF , 1648px 109px #FFF , 1205px 1659px #FFF , 921px 1313px #FFF , 1319px 243px #FFF , 18px 125px #FFF , 7px 777px #FFF , 181px 418px #FFF , 1062px 1892px #FFF , 382px 106px #FFF , 994px 751px #FFF , 964px 234px #FFF , 40px 118px #FFF , 278px 706px #FFF , 1540px 1978px #FFF , 425px 1661px #FFF , 1050px 321px #FFF , 735px 1729px #FFF , 1438px 260px #FFF , 1229px 1109px #FFF , 186px 1041px #FFF , 244px 1184px #FFF , 392px 1472px #FFF , 670px 1249px #FFF , 1260px 1443px #FFF , 1977px 1511px #FFF , 1240px 773px #FFF , 303px 513px #FFF , 63px 1530px #FFF , 610px 792px #FFF , 1987px 1647px #FFF , 676px 1597px #FFF , 1740px 1244px #FFF , 816px 1661px #FFF , 351px 802px #FFF , 252px 1082px #FFF , 31px 365px #FFF , 1453px 984px #FFF , 667px 1233px #FFF , 1247px 1800px #FFF , 839px 270px #FFF , 775px 913px #FFF , 1966px 1398px #FFF , 499px 813px #FFF , 922px 1982px #FFF , 1409px 1902px #FFF , 1499px 1766px #FFF , 721px 899px #FFF , 788px 807px #FFF , 989px 1355px #FFF , 1248px 1274px #FFF , 849px 1091px #FFF , 1799px 1036px #FFF , 1486px 700px #FFF , 170px 1989px #FFF , 1275px 799px #FFF , 772px 2000px #FFF , 1642px 362px #FFF , 216px 940px #FFF , 1893px 281px #FFF , 1944px 1298px #FFF , 1294px 400px #FFF , 1523px 441px #FFF , 1829px 340px #FFF , 468px 170px #FFF , 1099px 967px #FFF , 1331px 665px #FFF , 1174px 1553px #FFF , 1567px 325px #FFF , 1028px 1399px #FFF , 781px 1451px #FFF , 1912px 1954px #FFF , 874px 873px #FFF , 1298px 1722px #FFF , 1879px 706px #FFF , 57px 1221px #FFF , 1116px 1432px #FFF , 48px 811px #FFF , 101px 916px #FFF , 677px 304px #FFF , 1203px 639px #FFF , 1391px 199px #FFF , 1895px 1988px #FFF , 1462px 1023px #FFF , 1216px 1751px #FFF , 1261px 663px #FFF , 1290px 1119px #FFF , 137px 1793px #FFF , 1052px 1470px #FFF , 1561px 226px #FFF , 1156px 402px #FFF , 709px 693px #FFF , 1040px 1911px #FFF , 1624px 1115px #FFF , 551px 475px #FFF , 416px 1090px #FFF , 1183px 451px #FFF , 58px 765px #FFF , 743px 1016px #FFF , 198px 369px #FFF , 1645px 1503px #FFF , 997px 22px #FFF , 1447px 1323px #FFF , 379px 883px #FFF , 1171px 1195px #FFF , 919px 133px #FFF , 1400px 517px #FFF , 725px 804px #FFF , 1600px 699px #FFF , 357px 581px #FFF , 266px 1713px #FFF , 848px 1749px #FFF , 1963px 1045px #FFF , 119px 1136px #FFF;
-webkit-animation: animStar 50s linear infinite;
-moz-animation: animStar 50s linear infinite;
-ms-animation: animStar 50s linear infinite;
animation: animStar 50s linear infinite;
}
@keyframes animStar {
from {
transform: translateY(0px);
}
to {
transform: translateY(-2000px);
}
}
https://jsfiddle.net/y6398bgw/
https://jsfiddle.net/a7mdypo6/
CSS-Style.css 맨 아랫부분에 복붙해봐도 적용이 안되는데 어떻게 해야할까요ㅠㅠ?
정확히 어떤 부분을 어떻게 붙여넣으셨다는 말인가요?
css만 따로 넣으셔서 되는건 아닐거고 html 코드도 함께 넣으셨나요?
아 html 코드도 넣어야 하나요?? 죄송합니다 제가 정말 초짜라서ㅠ
올려주신 링크에서 하나 들어가서 css 전체 복붙 후, 파일질라 css-style.css 맨 마지막 부분에 넣었었습니다ㅠㅠ
단순 이렇게만 해도 적용되는데요?
<html>
<head>
<style>
body { background-color: #000; }
#stars {
width: 1px;
height: 1px;
background: transparent;
box-shadow: 117px 1613px #FFF , 1488px 635px #FFF , 944px 914px #FFF , 647px 277px #FFF , 1792px 1205px #FFF , 656px 1517px #FFF , 820px 1839px #FFF , 1153px 1400px #FFF , 870px 13px #FFF , 550px 702px #FFF , 1155px 1056px #FFF , 88px 1709px #FFF , 1450px 1090px #FFF , 1929px 457px #FFF , 1390px 905px #FFF , 1771px 269px #FFF , 1741px 669px #FFF , 432px 64px #FFF , 563px 996px #FFF , 1918px 1873px #FFF , 1845px 1211px #FFF , 231px 1503px #FFF , 37px 220px #FFF , 1970px 495px #FFF , 1812px 925px #FFF , 67px 1398px #FFF , 535px 279px #FFF , 1837px 829px #FFF , 1945px 685px #FFF , 1677px 1817px #FFF , 1317px 1415px #FFF , 1785px 905px #FFF , 1787px 1554px #FFF , 802px 1296px #FFF , 512px 1101px #FFF , 583px 1364px #FFF , 336px 558px #FFF , 979px 334px #FFF , 106px 792px #FFF , 204px 34px #FFF , 1845px 1763px #FFF , 445px 1599px #FFF , 386px 453px #FFF , 471px 952px #FFF , 1466px 1676px #FFF , 1885px 303px #FFF , 51px 1717px #FFF , 1211px 299px #FFF , 1546px 1887px #FFF , 1067px 33px #FFF , 1088px 1326px #FFF , 1938px 760px #FFF , 470px 648px #FFF , 1213px 269px #FFF , 1767px 78px #FFF , 977px 976px #FFF , 1926px 175px #FFF , 722px 1512px #FFF , 945px 227px #FFF , 1811px 99px #FFF , 1912px 1406px #FFF , 1602px 1243px #FFF , 610px 449px #FFF , 654px 1393px #FFF , 1930px 1193px #FFF , 258px 1184px #FFF , 89px 265px #FFF , 824px 1494px #FFF , 1506px 1435px #FFF , 1027px 753px #FFF , 1px 1197px #FFF , 530px 1161px #FFF , 864px 1555px #FFF , 1610px 1604px #FFF , 1035px 1114px #FFF , 1456px 133px #FFF , 1196px 1253px #FFF , 361px 1037px #FFF , 834px 351px #FFF , 436px 1676px #FFF , 1194px 1007px #FFF , 1141px 647px #FFF , 319px 454px #FFF , 937px 1769px #FFF , 1872px 1013px #FFF , 733px 643px #FFF , 1250px 511px #FFF , 189px 296px #FFF , 1639px 163px #FFF , 1584px 336px #FFF , 1912px 1343px #FFF , 1298px 1307px #FFF , 1750px 902px #FFF , 1129px 845px #FFF , 1899px 1470px #FFF , 1427px 232px #FFF , 1391px 838px #FFF , 1225px 1819px #FFF , 190px 1366px #FFF , 1865px 518px #FFF , 203px 1383px #FFF , 1455px 614px #FFF , 423px 354px #FFF , 1678px 1790px #FFF , 241px 608px #FFF , 1089px 730px #FFF , 1342px 38px #FFF , 1848px 249px #FFF , 1874px 1785px #FFF , 1040px 1837px #FFF , 751px 261px #FFF , 510px 1975px #FFF , 52px 795px #FFF , 1786px 1310px #FFF , 498px 712px #FFF , 190px 375px #FFF , 1341px 722px #FFF , 43px 1394px #FFF , 1821px 1687px #FFF , 106px 130px #FFF , 1717px 1978px #FFF , 168px 151px #FFF , 183px 740px #FFF , 945px 1381px #FFF , 669px 1170px #FFF , 1285px 1816px #FFF , 110px 1217px #FFF , 1623px 813px #FFF , 869px 647px #FFF , 867px 582px #FFF , 735px 1240px #FFF , 519px 1896px #FFF , 132px 156px #FFF , 1649px 193px #FFF , 241px 1109px #FFF , 643px 484px #FFF , 574px 1282px #FFF , 1952px 564px #FFF , 1978px 145px #FFF , 329px 903px #FFF , 1674px 617px #FFF , 1978px 558px #FFF , 1808px 1715px #FFF , 1526px 1238px #FFF , 475px 1330px #FFF , 810px 425px #FFF , 1709px 634px #FFF , 1658px 336px #FFF , 425px 194px #FFF , 352px 96px #FFF , 148px 180px #FFF , 1139px 1046px #FFF , 1809px 1233px #FFF , 1669px 171px #FFF , 263px 1394px #FFF , 534px 715px #FFF , 396px 1008px #FFF , 589px 1445px #FFF , 1190px 381px #FFF , 1709px 279px #FFF , 520px 891px #FFF , 1136px 1867px #FFF , 1280px 1233px #FFF , 836px 296px #FFF , 1348px 646px #FFF , 1539px 913px #FFF , 423px 781px #FFF , 1271px 1805px #FFF , 696px 564px #FFF , 1549px 804px #FFF , 303px 1555px #FFF , 1449px 1903px #FFF , 66px 687px #FFF , 1164px 856px #FFF , 1958px 1326px #FFF , 125px 157px #FFF , 508px 1669px #FFF , 465px 725px #FFF , 1925px 1440px #FFF , 405px 793px #FFF , 278px 110px #FFF , 1084px 1065px #FFF , 1077px 705px #FFF , 663px 1844px #FFF , 734px 263px #FFF , 870px 1761px #FFF , 103px 1169px #FFF , 1506px 1295px #FFF , 1883px 926px #FFF , 335px 1361px #FFF , 1126px 1284px #FFF , 257px 1165px #FFF , 837px 580px #FFF , 1211px 1362px #FFF , 1137px 1380px #FFF , 135px 632px #FFF , 1491px 1965px #FFF , 1098px 195px #FFF , 506px 417px #FFF , 693px 1243px #FFF , 622px 1862px #FFF , 1412px 1343px #FFF , 948px 1894px #FFF , 1315px 1363px #FFF , 754px 1098px #FFF , 1931px 930px #FFF , 1831px 342px #FFF , 1751px 1839px #FFF , 84px 775px #FFF , 1662px 1488px #FFF , 617px 1769px #FFF , 1869px 1292px #FFF , 963px 432px #FFF , 371px 1114px #FFF , 37px 642px #FFF , 21px 1184px #FFF , 602px 366px #FFF , 414px 524px #FFF , 282px 244px #FFF , 1689px 868px #FFF , 943px 681px #FFF , 898px 679px #FFF , 449px 1774px #FFF , 1678px 1313px #FFF , 475px 1811px #FFF , 1146px 1509px #FFF , 1151px 1863px #FFF , 1617px 846px #FFF , 82px 1077px #FFF , 324px 1317px #FFF , 1516px 885px #FFF , 1706px 1526px #FFF , 1925px 1180px #FFF , 553px 967px #FFF , 1072px 536px #FFF , 1715px 1816px #FFF , 185px 286px #FFF , 1362px 1600px #FFF , 628px 1938px #FFF , 1187px 412px #FFF , 569px 211px #FFF , 1959px 1356px #FFF , 1571px 105px #FFF , 319px 1111px #FFF , 36px 1364px #FFF , 502px 1788px #FFF , 1051px 1993px #FFF , 1617px 773px #FFF , 424px 1507px #FFF , 1623px 1955px #FFF , 307px 662px #FFF , 183px 1048px #FFF , 1919px 1453px #FFF , 1006px 1817px #FFF , 468px 673px #FFF , 1142px 1375px #FFF , 1228px 443px #FFF , 1734px 552px #FFF , 20px 1041px #FFF , 1783px 334px #FFF , 98px 1237px #FFF , 1356px 1940px #FFF , 853px 1779px #FFF , 1910px 560px #FFF , 1174px 1656px #FFF , 110px 1724px #FFF , 542px 1771px #FFF , 1758px 1931px #FFF , 1463px 1401px #FFF , 1155px 84px #FFF , 1504px 835px #FFF , 750px 322px #FFF , 407px 1900px #FFF , 1600px 1141px #FFF , 657px 886px #FFF , 526px 714px #FFF , 18px 836px #FFF , 1546px 1548px #FFF , 22px 469px #FFF , 594px 1466px #FFF , 1160px 1078px #FFF , 627px 1055px #FFF , 195px 699px #FFF , 1099px 684px #FFF , 530px 551px #FFF , 1160px 1325px #FFF , 894px 727px #FFF , 1157px 98px #FFF , 136px 1483px #FFF , 1875px 1975px #FFF , 1803px 566px #FFF , 318px 1073px #FFF , 1866px 1656px #FFF , 543px 414px #FFF , 719px 474px #FFF , 1115px 738px #FFF , 353px 875px #FFF , 184px 1938px #FFF , 1854px 1534px #FFF , 420px 1698px #FFF , 1480px 1550px #FFF , 522px 203px #FFF , 1897px 1904px #FFF , 975px 1708px #FFF , 1774px 602px #FFF , 1908px 274px #FFF , 61px 715px #FFF , 983px 1156px #FFF , 326px 1013px #FFF , 641px 290px #FFF , 1522px 120px #FFF , 405px 1637px #FFF , 1021px 1099px #FFF , 631px 1145px #FFF , 982px 1967px #FFF , 200px 651px #FFF , 795px 351px #FFF , 790px 1082px #FFF , 144px 1572px #FFF , 1542px 901px #FFF , 158px 1524px #FFF , 849px 1843px #FFF , 1807px 203px #FFF , 1747px 45px #FFF , 1603px 1738px #FFF , 617px 1966px #FFF , 342px 748px #FFF , 1779px 1173px #FFF , 1428px 152px #FFF , 589px 1998px #FFF , 1940px 1838px #FFF , 115px 272px #FFF , 1217px 1395px #FFF , 1402px 1491px #FFF , 1833px 1814px #FFF , 243px 966px #FFF , 319px 578px #FFF , 813px 364px #FFF , 669px 882px #FFF , 551px 134px #FFF , 1819px 920px #FFF , 740px 1826px #FFF , 1021px 952px #FFF , 1575px 453px #FFF , 324px 419px #FFF , 929px 417px #FFF , 885px 1112px #FFF , 503px 187px #FFF , 1908px 362px #FFF , 1063px 1601px #FFF , 169px 1792px #FFF , 789px 963px #FFF , 1697px 948px #FFF , 1761px 1810px #FFF , 1844px 1591px #FFF , 1709px 949px #FFF , 1402px 1396px #FFF , 1037px 225px #FFF , 1832px 518px #FFF , 1728px 1782px #FFF , 194px 1421px #FFF , 1395px 742px #FFF , 1478px 1325px #FFF , 40px 593px #FFF , 1732px 117px #FFF , 51px 158px #FFF , 1598px 1672px #FFF , 701px 849px #FFF , 1403px 1979px #FFF , 145px 1414px #FFF , 550px 906px #FFF , 1366px 460px #FFF , 142px 1379px #FFF , 34px 1864px #FFF , 1346px 308px #FFF , 293px 998px #FFF , 21px 1868px #FFF , 540px 1033px #FFF , 60px 746px #FFF , 1602px 1476px #FFF , 180px 804px #FFF , 345px 1982px #FFF , 1439px 640px #FFF , 939px 1834px #FFF , 20px 432px #FFF , 492px 1549px #FFF , 109px 1579px #FFF , 1796px 1403px #FFF , 1079px 519px #FFF , 1664px 389px #FFF , 1627px 1061px #FFF , 823px 419px #FFF , 1399px 1882px #FFF , 1906px 344px #FFF , 1189px 848px #FFF , 117px 882px #FFF , 1262px 33px #FFF , 1048px 434px #FFF , 1208px 1309px #FFF , 1616px 408px #FFF , 1833px 853px #FFF , 1433px 1656px #FFF , 811px 1861px #FFF , 439px 1672px #FFF , 1105px 248px #FFF , 328px 1652px #FFF , 13px 1658px #FFF , 685px 987px #FFF , 985px 403px #FFF , 1664px 1206px #FFF , 1993px 1925px #FFF , 440px 917px #FFF , 1835px 319px #FFF , 1404px 1907px #FFF , 624px 1443px #FFF , 843px 954px #FFF , 478px 1567px #FFF , 895px 1602px #FFF , 1231px 871px #FFF , 1267px 1646px #FFF , 475px 334px #FFF , 784px 796px #FFF , 1294px 199px #FFF , 109px 702px #FFF , 1978px 362px #FFF , 291px 940px #FFF , 971px 1343px #FFF , 74px 719px #FFF , 36px 715px #FFF , 1007px 1423px #FFF , 860px 314px #FFF , 631px 177px #FFF , 1900px 1590px #FFF , 1239px 1348px #FFF , 1346px 1270px #FFF , 1934px 1475px #FFF , 1553px 559px #FFF , 588px 1969px #FFF , 670px 1269px #FFF , 1484px 376px #FFF , 20px 1424px #FFF , 1396px 8px #FFF , 969px 244px #FFF , 1807px 538px #FFF , 1873px 891px #FFF , 636px 1142px #FFF , 1474px 1562px #FFF , 763px 350px #FFF , 663px 700px #FFF , 500px 1469px #FFF , 1302px 722px #FFF , 181px 291px #FFF , 266px 893px #FFF , 1403px 654px #FFF , 492px 460px #FFF , 1503px 1369px #FFF , 23px 1662px #FFF , 349px 333px #FFF , 1435px 1017px #FFF , 1441px 705px #FFF , 1708px 1446px #FFF , 1041px 911px #FFF , 1063px 780px #FFF , 1158px 1356px #FFF , 767px 1454px #FFF , 1912px 797px #FFF , 1731px 1759px #FFF , 1378px 1390px #FFF , 1815px 1364px #FFF , 960px 270px #FFF , 1343px 427px #FFF , 275px 203px #FFF , 1319px 1092px #FFF , 1455px 770px #FFF , 283px 1503px #FFF , 1505px 901px #FFF , 1738px 1561px #FFF , 1526px 1935px #FFF , 1757px 669px #FFF , 1640px 620px #FFF , 1750px 722px #FFF , 748px 66px #FFF , 1149px 540px #FFF , 159px 953px #FFF , 200px 1426px #FFF , 515px 1110px #FFF , 1552px 737px #FFF , 1094px 1459px #FFF , 778px 799px #FFF , 1031px 523px #FFF , 743px 1825px #FFF , 1100px 882px #FFF , 1088px 1836px #FFF , 255px 599px #FFF , 67px 1361px #FFF , 247px 1721px #FFF , 1722px 346px #FFF , 1822px 155px #FFF , 452px 1973px #FFF , 415px 1960px #FFF , 1109px 57px #FFF , 273px 1392px #FFF , 404px 1071px #FFF , 1212px 353px #FFF , 370px 460px #FFF , 795px 1523px #FFF , 1932px 340px #FFF , 51px 1473px #FFF , 1268px 364px #FFF , 1512px 1862px #FFF , 1678px 1801px #FFF , 1796px 579px #FFF , 254px 251px #FFF , 1466px 1717px #FFF , 893px 379px #FFF , 1153px 923px #FFF , 913px 1808px #FFF , 791px 789px #FFF , 417px 1924px #FFF , 1336px 1599px #FFF , 1695px 908px #FFF , 1120px 114px #FFF , 493px 1949px #FFF , 68px 1905px #FFF , 969px 481px #FFF , 1420px 1095px #FFF , 800px 1117px #FFF , 390px 234px #FFF , 356px 1644px #FFF , 1098px 1486px #FFF , 1360px 521px #FFF , 149px 1198px #FFF , 354px 747px #FFF , 1749px 487px #FFF , 470px 76px #FFF , 1672px 289px #FFF , 1731px 545px #FFF , 1547px 1590px #FFF , 498px 692px #FFF , 398px 1592px #FFF , 1846px 1237px #FFF , 1537px 1474px #FFF , 1726px 1374px #FFF , 1922px 858px #FFF , 376px 321px #FFF , 985px 227px #FFF , 234px 1421px #FFF , 760px 745px #FFF , 1990px 1132px #FFF , 1560px 1597px #FFF , 338px 1310px #FFF , 1924px 1664px #FFF , 547px 1747px #FFF , 1639px 1282px #FFF , 1202px 337px #FFF , 1985px 779px #FFF , 737px 456px #FFF , 89px 501px #FFF , 963px 792px #FFF , 655px 1447px #FFF , 1492px 1994px #FFF , 1171px 254px #FFF , 892px 827px #FFF , 1735px 442px #FFF , 1474px 1187px #FFF , 846px 1518px #FFF , 557px 1805px #FFF , 738px 945px #FFF , 795px 68px #FFF , 663px 1956px #FFF , 1607px 290px #FFF , 1524px 15px #FFF , 1097px 1911px #FFF , 157px 1939px #FFF , 935px 1065px #FFF , 1809px 1708px #FFF , 164px 1157px #FFF , 83px 855px #FFF , 625px 501px #FFF , 814px 398px #FFF , 552px 695px #FFF , 597px 1546px #FFF , 1237px 1417px #FFF , 628px 284px #FFF , 866px 767px #FFF , 1403px 1394px #FFF , 765px 1563px #FFF , 1648px 109px #FFF , 1205px 1659px #FFF , 921px 1313px #FFF , 1319px 243px #FFF , 18px 125px #FFF , 7px 777px #FFF , 181px 418px #FFF , 1062px 1892px #FFF , 382px 106px #FFF , 994px 751px #FFF , 964px 234px #FFF , 40px 118px #FFF , 278px 706px #FFF , 1540px 1978px #FFF , 425px 1661px #FFF , 1050px 321px #FFF , 735px 1729px #FFF , 1438px 260px #FFF , 1229px 1109px #FFF , 186px 1041px #FFF , 244px 1184px #FFF , 392px 1472px #FFF , 670px 1249px #FFF , 1260px 1443px #FFF , 1977px 1511px #FFF , 1240px 773px #FFF , 303px 513px #FFF , 63px 1530px #FFF , 610px 792px #FFF , 1987px 1647px #FFF , 676px 1597px #FFF , 1740px 1244px #FFF , 816px 1661px #FFF , 351px 802px #FFF , 252px 1082px #FFF , 31px 365px #FFF , 1453px 984px #FFF , 667px 1233px #FFF , 1247px 1800px #FFF , 839px 270px #FFF , 775px 913px #FFF , 1966px 1398px #FFF , 499px 813px #FFF , 922px 1982px #FFF , 1409px 1902px #FFF , 1499px 1766px #FFF , 721px 899px #FFF , 788px 807px #FFF , 989px 1355px #FFF , 1248px 1274px #FFF , 849px 1091px #FFF , 1799px 1036px #FFF , 1486px 700px #FFF , 170px 1989px #FFF , 1275px 799px #FFF , 772px 2000px #FFF , 1642px 362px #FFF , 216px 940px #FFF , 1893px 281px #FFF , 1944px 1298px #FFF , 1294px 400px #FFF , 1523px 441px #FFF , 1829px 340px #FFF , 468px 170px #FFF , 1099px 967px #FFF , 1331px 665px #FFF , 1174px 1553px #FFF , 1567px 325px #FFF , 1028px 1399px #FFF , 781px 1451px #FFF , 1912px 1954px #FFF , 874px 873px #FFF , 1298px 1722px #FFF , 1879px 706px #FFF , 57px 1221px #FFF , 1116px 1432px #FFF , 48px 811px #FFF , 101px 916px #FFF , 677px 304px #FFF , 1203px 639px #FFF , 1391px 199px #FFF , 1895px 1988px #FFF , 1462px 1023px #FFF , 1216px 1751px #FFF , 1261px 663px #FFF , 1290px 1119px #FFF , 137px 1793px #FFF , 1052px 1470px #FFF , 1561px 226px #FFF , 1156px 402px #FFF , 709px 693px #FFF , 1040px 1911px #FFF , 1624px 1115px #FFF , 551px 475px #FFF , 416px 1090px #FFF , 1183px 451px #FFF , 58px 765px #FFF , 743px 1016px #FFF , 198px 369px #FFF , 1645px 1503px #FFF , 997px 22px #FFF , 1447px 1323px #FFF , 379px 883px #FFF , 1171px 1195px #FFF , 919px 133px #FFF , 1400px 517px #FFF , 725px 804px #FFF , 1600px 699px #FFF , 357px 581px #FFF , 266px 1713px #FFF , 848px 1749px #FFF , 1963px 1045px #FFF , 119px 1136px #FFF;
-webkit-animation: animStar 50s linear infinite;
-moz-animation: animStar 50s linear infinite;
-ms-animation: animStar 50s linear infinite;
animation: animStar 50s linear infinite;
}
@keyframes animStar {
from {
transform: translateY(0px);
}
to {
transform: translateY(-2000px);
}
}
</style>
</head>
<body>
<div id="stars"></div>
</body>
</html>
css 폴더 - style.css 맨 마지막 부분에 복붙해서 넣는게 맞나요...? 저는 아보카도 갠홈에 적용이 안되네요......
위 소스 html 파일로 저장하고 동작하는 부분 확인해보세요
그리고 파악되면 입맛에 맞게 응용하시면 되죠.
html로 저장해서 따로 창 열리는 거에서 모션 확인은 했습니다
근데 홈페이지에 적용하려고 style.css에 붙여넣으면 적용이 안되네요 휴ㅠ....
안녕하세요~ 첫번째 홈 주인입니다 ㅎㅎ 제 홈 링크가 걸려있다길래 제보받고 왔는데.. 제가 누구에게 답변해드릴만한 실력이 아니다보니 조금 부끄럽네요... ^^;;ㅠㅠ 그래도 혹시 참고가 되실까 싶어 방법 남겨드려요.
저의 경우에는
1. codepen 사이트에서 적용하고싶은 효과 고르기 (저는 https://codepen.io/mikel301292/pen/EejGbj 참고했습니다)
2. CSS, JS 코드를 메모장에 직접 복사 붙여넣기 후 (CSS 코드에 들어있는 body나 배경은 삭제 해주셔야 합니다.) 홈페이지에 업로드
3. head 파일에 JS 파일 연동, head.sub 파일에 CSS파일 연동
3-1. 이 때 추가로 연동해야 하는 JS 파일이 있다면 꼭 연결해줍니다. (code펜 사이트의 톱니바퀴 모양 누르시면 확인 가능해요.)
로 적용했었던 것 같아요.
적용한지 시간이 좀 되어서... 자세히 기억은 안 나는데 혹시 적용해보시다가 막히시는 부분 있으시면 파일 뜯어다가 알려드리도록 할게요. o///o)
안녕하세요! 제가 너무 늦게 확인을 해버렸네요?... 개인 디엠으로 찾아가면 귀찮으실까봐 홀로 알아내려 했는데 이렇게 찾아와주셔서 죄송하고 감사합니다?..... 삭제 원하시면 삭제하도록 하겠습니다ㅠㅠ
그리고 적용 방법에 대해 궁금한 점이 있는데...2번부터 잘 이해가지 않네요ㅠㅠ 메모장에 따로 백업하라는 말까지는 이해했는데, 홈페이지에 업로드 한다는 말과 body나 배경을 삭제하라는 말이 무슨 의미일까요ㅠㅠ...?! 또 3번에 연동하라는 말은 맨 아래에 코드펜의 코드를 복붙해서 넣으라는 말일까요...?!
앗~~!! 삭제 안 하셔도 괜찮아요! 저도 너무 신기하고 얼떨떨하네요... o/////o)
너무 늦게 확인했는데.. 아직도 해결 못 하셨다면요..!!
① CSS, JS 파일은 직접 백업
② 위 과정에서 CSS의 body{~~~} 부분은 삭제
③ 백업한 파일을 ftp 프로그램(파일질라 등)을 이용하여 자신의 사이트에 업로드
④ head.sub.php 파일에 <link rel="stylesheet" href="파일 경로"> 형식으로 CSS 파일 연결
⑤ head.php 파일에 <script src="파일 경로"></script> 형식으로 JS 파일 연결
⑥ head.php 파일에 해당 코드의 html 코드를 입력
순으로 하시면~?! 됩니다!!
개인디엠 주셔도 괜찮으니 모르시는거 있으시면 편하게 물어봐주셔도 되어요~!!!
안녕하세요, 두번째 홈 주인입니다.
마찬가지로 제보 받고 왔는데 실력이 많이 부족한지라 다른 사람이 제가 지저분하게 작업한 과정~코드를 보는 게 부담스러워서 홈에 전체적으로 우클릭을 막아둔 용도도 있었는데 답변으로 버젓이 제 css 주소가 달려있으니 무척 당황스럽습니다...^_ㅠ....
저 역시 아무것도 모르는 상태에서 코드를 만져왔기에 어떤 느낌으로 이렇게 질문 글 올리셨는지는 충분히 이해가 가지만, 말씀드렸듯 제보를 받고 당황스러움이 컸던지라 글 삭제를 요청드리고 싶습니다. (단순 링크만 삭제를 요청드리자니 이미 답변으로도 주소가 여기저기 남은 듯하여...)
여담으로 아직 적용 방법을 찾지 못하셨다면 직접 설명해드릴 수 있으니 방명록에 글 한 번만 남겨주세요. DM 나눌 수 있는 트위터 아이디 드리겠습니다! _ _)
답변에 주소가 들어가있는건 저뿐이더라구요. 해당부분은 삭제 했습니다.
답변을 작성하시기 전에 로그인 해주세요.
