CSS에서 텍스트 그라데이션 애니메이션을 실제로 설정하는 방법

재킷 사진은 크리스토퍼 롤러가 언플러시를 통해 촬영했다.
기왕 너희들이 모두 나를 좋아한다면, 나는 다시 한 번 할 가치가 있다고 생각한다.애니메이션background-position을 통해 점차적인 배경을 설정할 수 있는 애니메이션을 알려 주셔서 감사합니다.
그래서 유머러스한 글을 써서 가능한 한 최악의 기술적 기능인 CSS를 만들게 하는 것보다 이 일을 무섭지 않게 만드는 것이 낫다.나는 내가 이번에 사용한 유일한 JavaScript는 단추에 사용된다고 맹세한다.
나는 문제가 없다. 나는 언제든지 멈출 수 있다.
지난번에 무지개 텍스트를 얻는 방법을 알았으니 좋은 부분으로 넘어가자.

배경 위치 애니메이션 설정

이러한 전환을 사용하기 위해서, 나는 점차적으로 한 방향으로 이동하는 것을 확보하기 위해 이전 문장 (yikes) 과 유사한 전략을 취해야 할 가능성이 높다.그러나 나는 이런 노력을 겪지 않고 사용하기로 결정했다@keyframes. 결과적으로 이것은 제출하기 전에 파일을 추가하는 것을 잊어버린 것처럼 간단하다는 것을 증명했다.

@keyframes whoosh {
  0% { background-position-x: 0 }
  100% { background-position-x: 100% }
}

.animated-thing {
  animation-name: whoosh; // references @keyframes name
  animation-duration: 2000ms; // or whatever
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

하지만 괜찮아 보이게 하려면 중요한 경고가 하나 더 있다.
A.카트비트?응?
cat 이미지 너비 200px, 창 너비 400px 또는 500px.(를 클릭하여 전환합니다.)용기의 폭이 400px일 때, 애니메이션은 매끄럽고, 순환할 때, 갑자기 초기화되는 것을 눈치채지 못할 것입니다.그것의 폭이 500px일 때 애니메이션의 끝은 100px 편이이고 도약이 매우 뚜렷하다.
GIF를 사용하여 설명:

순환이 초기화될 때, 순환이 시작될 때와 같은 위치에 있어서 순환이 뚜렷하지 않게 변한다.(점프는 여전히 있을 수 있지만 매우 작아야 한다.)

비록 이 부스스한 구름 친구는 매우 귀엽지만, 카메라가 마지막 순간에 급격히 아래로 회전하기 때문에 점프가 매우 뚜렷하다.고양이를 찍을 줄 알고, 자유롭게 움직일 줄 안다.
또 다른 문제는 이 상황에서 배경을 용기와 똑같은 너비로 설정하면 애니메이션을 설정할 수 없다는 것이다.나는 CSS가 갈 곳이 없다고 생각한다!그래서 그것은 정확한 분수나 정확한 배수가 필요하지만 같지 않다.시작할 때와 똑같은 위치로 재설정해야 합니다.

그라데이션을 사용하여 배경 위치 애니메이션 설정하기

CSS가 실제로 애니메이션을 설정할 수 있도록 background-size 폭과 높이를 200% 로 설정합니다.이것은 가장 간단한 부분이다.
그래디언트를 부드럽게 설정하는 것은 더 어렵습니다.

  $first-color: #996699;
  $second-color:  #B39500;
  $third-color:  #009980;
  $fourth-color: #006699;
  $angle: 75deg;

  background-image: linear-gradient(
    $angle,
    // so you can see the repetition of colors easily
    $first-color,
    $second-color,
    $third-color,
    $fourth-color,
    // repeat a second time
    $first-color,
    $second-color,
    $third-color,
    $fourth-color,
    // back to the first color
    $first-color
  );
}

이것이 바로 사다리의 설정 방식이다. 이렇게 하면 순환이 초기화될 때'도약'이 나타나지 않는다.그것은 두 번 반복해야 하지만, 순환의 첫 번째 자리도 반복해야 한다.마지막 펜에서 이것은 혼합이다.

@mixin flag-gradient($direction: null, $color-stops...) {
  $grads: $color-stops;
  @each $stop in $color-stops {
    $grads: append($grads, $stop);
  }
  $grads: append($grads, nth(nth($grads, 1), 1));

  // [ clipped ]

  background-image: linear-gradient($direction, $grads);
}

이것은 모든 중복 작업을 완성했다.이것은 보내진arg 목록을 복사한 다음 그 위에 순환해서 모든 새로운 색 정지 (hmu, 이 부분을 완성하는 더 좋은 방법을 알고 있다면) 를 추가하고 첫 번째 색 정지된 색 부분을 선택하여 끝에 박습니다.이렇게 하면 실제 로고 색깔만 지정할 수 있습니다.
사다리를 향하는 각도를 주의해야 한다. 가파를수록 도약이 뚜렷해진다.75에서 90 사이의 어딘가에서는 거의 볼 수 없지만, 보기에는 여전히 눈을 즐겁게 할 정도로 기울어져 있다.폭이 작을수록 이 각도도 날카로워야 한다.90은 안전!
dev.to에서 내장 펜을 보면 90도 변형이 표시됩니다.

@mixin flag-gradient($direction: null, $color-stops...) {
  // [ clipped ]

  @if $direction == null {
    $direction: 75deg;
    @media only screen and  (max-width : 800px) {
      $direction: 80deg;
    }
    @media only screen and  (max-width : 500px) {
      $direction: 90deg;
    }
  }

  // [ clipped ]
}

애니메이션의 품질은 각도와 너비에 따라 크게 변하기 때문에 덮어쓰기를 보내지 않으면 자동으로 조정합니다.

추가 플래그 추가🏳️‍🌈 (재구성)

내가 최초의 무지개 애니메이션을 만들기 시작한 후, 그것은 마치...너무 쉬워요.나는 CSS와의 영원한 투쟁에서 더욱 노력해야 한다.이것이 널리 보급될 수 있는지 알고 싶습니다.제가 더 자랑스럽게 행동할 수 있을까요?

bi-pride 로고에서 나는 또 다른 재미있는 경고를 발견했다.도약이 뚜렷하지 않도록 사다리는 가능한 한 매끄러워야 한다.백분율에 기반한 색을 사용하면 통상적으로 효과가 좋지 않습니다.간단하게 색을 복제하면 더 좋은 결과를 얻을 수 있다.

응, 나는 흰색 비트가 배경에 이렇게 많이 융합되지 않도록 텍스트 그림자가 거기에 있는 것을 정말 보고 싶다.흰색은 서로 다른 깃발에 나타나기 때문에 이것은 틀림없이 보편적인 문제이다.

순조롭게 진행되다.
만약 네가 자세히 생각해 본다면, 이것은 사실상 완전히 논리에 맞는 것이다.사다리꼴 텍스트 기교가 효과가 있는 것은 먼저 텍스트 자체를 투명하게 하고 배경을 자르기 때문이다.텍스트를 실제로 적용하는 배경이 아닙니다.
나는 확실히 이 문제를 해결하는 것을 고려한 적이 있다.StackOverflow:

Basically, the idea is to have 2 div overplayed on each other. The lower one provides the background and the shadow. And the the div above just uses a mask to cut out the exact same text from the background image, so that it covers the text of lower element, but not the shadow:

2개의 파티션이 서로 중첩됨

2개의 파티션이 서로 중첩됨

2개의 파티션이 서로 중첩됨

다시는 그 길을 따라 가지 마라!너는 나를 강요해서는 안 된다!

충분히 가깝다.
각종 깃발의 디자인과 색깔을 시험한 후에 나는 명암과 따뜻함/시원함 등 네 가지 다른'주제'가 필요하다고 결정했다.이것이 바로 이 모든 목적입니다.

$background-map: (
    light-cool: #ecf0f1,
    light-warm: #f2eded,
    dark-cool: #10181e,
    dark-warm: #0e070a,
);

@function get-opposite-tone($tone) {
  @if $tone == 'light' {
    @return 'dark';
  }
  @return 'light';
}

@mixin set-background($tone: 'light', $temp: 'cool') {
  $primary: null;
  $secondary: null;

  background-color: map-get($background-map, #{$tone}-#{$temp});
  & > #picker > button {
    background-color: map-get($background-map,
      #{get-opposite-tone($tone)}-#{$temp}
    );
    &.highlight {
      @if $tone == 'light' {
        background-color: lighten(map-get($background-map,
        #{get-opposite-tone($tone)}-#{$temp}
      ), 12);
      } @else {
        background-color: darken(map-get($background-map,
          #{get-opposite-tone($tone)}-#{$temp}
        ), 24);
      }
    }
    color: map-get($background-map, #{$tone}-#{$temp});
  }

  // [ clipped ]
}

이 때, 나는 단추를 연결하기 위해 8줄의 JavaScript (...jQuery 포함) 만 필요로 한다.

재미있는 사실을 총결하다

측면 버튼 사용CSS Grid 배치가 간단하고 편리함

당신은 표준적인'여성동성애자'의 교만 표지가 없다는 것을 아십니까?나는 립스틱 동성애자 로고를 선택했다. 왜냐하면 색깔의 정의를 쉽게 찾을 수 있을 뿐만 아니라, 가장 유행하는 것 같기 때문이다

SCSarglists

조회 문장을 @media에 넣을 수 없음 (lmao가 가능한지 보려고 했는데 컴파일러가 이상을 던졌습니다)