당근카렌 0

바꾸기 전에 애니메이션 다시 체크해보니까 밝은 배경에 별 때문에 눈 아파 보이던거라 

배경을 어두운 톤으로 쓸 거면 큰 별 빼고 눈 애니메이션은 속도만 조절해서 넣으니까 나쁘지 않은 듯?

속도만 조절하고 그라데이션 반전하니까 밤하늘 같아 보여서 이뻐짐

그리고 지금 바꾼 색이 다크모드에 좀 어울리는거 같아서 다크모드에 적용하고, 라이트모드는 이전에 썼던 톤 비슷한거로 적용

코드는 전에 이모가 썼던 거 거의 그대로니까 해당 되는 부분에 찾아서 넣고 확인 해보면 돼

수정한 부분은 파란색으로 표시

/* 프로필 위치 이동, 프로필 테두리 추가 끝 */

@keyframes sampleAnimation {

  0% {

    transform: translateY(0px);

  }

  50%{

    transform: translateY(-30px);

  }

  100% {

    transform: translateY(0px);

  }

}

:root {

  --bg: url("https://www.toptal.com/designers/subtlepatterns/patterns/sun-pattern.png");

  --color: #CCB7FF;

  --logoURL: url(https://upload.tgd.kr/20180317/38bd6d4a5dd4edbe87b68d7373ee748d.png);

  --logoWidth: 145px;

  --before: "책장을 넘기는 "; 

  --after: "명";

}

html.darkmode:root {

  --bg: url("https://www.toptal.com/designers/subtlepatterns/patterns/sun-pattern.png");

  --color: #90759f;

  --logoURL: url(https://upload.tgd.kr/20180317/38bd6d4a5dd4edbe87b68d7373ee748d.png);

  --logoWidth: 145px;

  --before: "책장을 넘기는 "; 

  --after: "명";

}

a,

a:hover,

a:focus {

  color: white;

  text-decoration: none;

}

span.a-badge i.fa.fa-info-circle  {color:#fff;

}

----------------------------------------------------------------------------

/* 페이지 */

.pagination>.active>a,

.pagination>.active>a:focus,

.pagination>.active>span,

.pagination>.active>span:focus {

  box-shadow: 0 0 2px 0 white, inset 0 0 2px 0 white;

  background: white;

  color: black;

  text-shadow: 0px 0px 2px #555;

  transition: 0.2s;

  border: none;

  border-radius: 5px;

}

.pagination>.active>a:hover,

.pagination>.active>span:hover,

.pagination>li>a:hover,

.pagination>li>span:hover {

  box-shadow: 0 0 0 0 #0007, inset 8em 0em 0 0 #0007;

  background: #0007;

  color: white;

}

.pagination>li>a,

.pagination>li>a:focus,

.pagination>li>span .pagination>li>span:focus {

  box-shadow: 0 0 2px 0 white, inset 0 0 2px 0 white;

  background: transparent;

  color: white;

  text-shadow: 0px 0px 2px #222;

  transition: 0.2s;

  border: none;

  border-radius: 5px;

  margin-left: 3px;

}

body {

 background:transparent;

}

html {

   background: linear-gradient(to top, #d38981, #96648f, #424268, #392f6c);

  height: auto !important;

}

---------------------------------------------------------------------------------------------------

/*뒷배경 움직이는 애니메이션*/

body {

background-image: url(' https://cdn.discordapp.com/attachments/340014045006397451/945572486278414376/quf3.png'), url(' https://cdn.discordapp.com/attachments/340014045006397451/945579864889630762/quf2.png');

-webkit-animation: snow 25s linear infinite;

-moz-animation: snow 18s linear infinite;

-ms-animation: snow 20s linear infinite;

animation: snow 24s linear infinite;

}

@keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}

}

@-moz-keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}

}

@-webkit-keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

50% {}

100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}

}

@-ms-keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}

}

-------------------------------------------------------------------------------------------------

적용하면 대충 이런 느낌

↑라이트 모드

↓다크 모드