아보카도 갠홈 배경 css 효과 질문

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
아보카도 갠홈 배경 css 효과 질문

QA

아보카도 갠홈 배경 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);
  }
}

아 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>

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 나눌 수 있는 트위터 아이디 드리겠습니다! _ _)

답변을 작성하시기 전에 로그인 해주세요.
전체 0 | RSS
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT