하트형 웨이브 CSS 효과

출처: Bokeh CSS by Coding Dude
이 CSS 자습서에서는 하트형 bokeh CSS 효과를 만드는 방법을 보여 드리겠습니다.같은 코드를 사용하여 다른 형태의 CSS bokeh 효과를 만들 수도 있습니다.
이것은 우리가 제작할 bokeh CSS 효과입니다.

귀찮은 독자들에게:

코드 펜 Heart Shaped Bokeh

Gist on Github

Heart symbol 전체 목록 복사/붙여넣기

기타 text symbols에서 MockoFun 복사/붙여넣기

보크가 뭐예요?

촬영에서 보키는 이미지의 초점을 잃은 부분에서 발생하는 모호한 심미적 품질을 가리킨다.Bokeh도 초점 밖에서 렌즈가 나타나는 방식으로 정의된다.렌즈의 상차와 코일 모양의 차이는 매우 다른 파기 효과를 초래할 수 있다.자세한 내용은 Wikipedia을 참조하십시오.

Bokeh CSS 효과는 어떻게 만듭니까?

창조bokeh 배후의 주요 생각은 일부 요소로 하여금 초점을 잃거나 모호하게 하는 것이다.CSS는 기존의 모호 필터를 제공합니다.
원소에 모호함을 더하려면 filter:blur(radius)을 말해야 한다.반지름은 원하는 요소가 얼마나 흐려지는지를 나타냅니다. 일반적으로 픽셀로 표시되지만 다른 측정 단위도 적용됩니다.MDN Web Docs의 모호 필터에 대한 더 많은 정보를 얻을 수 있습니다.
Bokeh도 광점을 가리킨다.따라서 우리는 몇 가지 모호한 요소가 필요하지만 어떤 방식으로 돋보이게 해야 한다.우리는 다른 필터를 사용할 수 있다: brightness 필터.그 문법은 filter:brightness(amount)이다.여기의 전체 문서를 참조하십시오.
우리는 각 광점에 서로 다른 색깔을 칠하는 방법이 필요하다.
그럼 코드를 작성해 봅시다.

Bokeh HTML 코드

우리는 파기광점을 대표하는 포장기와 divs이 필요하다.

<div class="bokeh">
 <div/>
 <div/>
 <div/>
 ...
</div>

기본적으로 우리는 div이 각 점의 빛을 위해 보크 CSS 효과를 창조해야 한다.
이렇게!
현재, 일부 화려한 CSS에 대해

Bokeh CSS 코드

"Bokeh 효과를 CSS로만 작성할 수 있지만 로드할 때마다""임의""가 제공되지 않습니다."한 사이트에 대해서 말하자면 이것은 좋을 수 있지만, 본 강좌를 위해서, 나는SCSS를 사용할 것이다.
SCS가 뭔지 모르면 동적 코드를 작성할 수 있는 CSS로 상상해 보세요.SCSS here으로 뭘 할 수 있는지 봐.
먼저 bokeh 효과 패키지를 설정합니다.

.bokeh {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: #1d0302;
  overflow: hidden;
}

별다른 것은 없다. 단지 화면 전체를 덮어야 할 어두운 구역들 뿐이다.
다음에 우리는 이 항목에 대해 상수 변수를 정의할 것이다.

입자 수 –

div 요소 수와 같아야 합니다.

입자 크기 – 원하는 광점의 크기는

기본 불투명도 - 투명 효과를 생성합니다.잠시 후 우리는 그것을 랜덤치

과 더할 것이다

기본 밝기 – 마찬가지로 나중에 임의 값에 추가합니다.

색상 세트 - 광점 색상 목록

$bokehCount: 25;
$bokehBaseSize: 11rem;
$bokehBaseOpacity: 0.45;
$bokehBaseBrightness: 200;
$colorSet: (
  rgba(224,0,0,0.8),
  rgba(255,123,123,0.2),
  rgba(96,27,0,0.7),
);

우리는 약간의 변수와 값이 있다.이제 그것들을 사용하자!
우선, 우리는 bokeh 포장 중의 모든div에 절대 위치를 사용할 것이다.

.bokeh div {
  position: absolute;
  border-radius: 50%;
}

그리고div를 교체하기 위해 SCSS를 사용합니다. 여기에서 무작위 값을 추가하기 시작합니다.우선, 나는 randomizedSize을 만들 것이다. 이것은 기본 사이즈에 무작위 값을 더해서 너비와 높이를 설정할 것이다.다음 단계에서는 위쪽과 왼쪽을 0~100% 경계 내의 임의 값으로 설정합니다.

@for $i from 1 through $bokehCount {
    &:nth-child(#{$i}) {
      $randomizedSize: random() + $bokehBaseSize;
      &:after{
        content:var(--emoji-shape);
        font-size: $randomizedSize;
      }
      width: $randomizedSize;
      height: $randomizedSize;
      top: random(50) * 1vh;
      left: random(50) * 1vw;
      color: nth($colorSet, random(length($colorSet)));
      opacity: $bokehBaseOpacity + random(4) * 0.15;
      text-shadow: ($randomizedSize + 5rem) 0 (0.2rem + random()*0.5rem) currentColor;
      filter: blur(random(10)*2px) brightness($bokehBaseBrightness + random(250)*1%);
    }
  }

이 코드는 기본적으로 무작위로 기광점을 편이할 것이다.또한 각 광점은 무작위로 $colorset 변수에서 다른 색상을 지정합니다.&:after CSS 규칙은 CSS 변수를 통해 컨텐트 세트에 임의 크기의 텍스트 위조 요소를 추가합니다.CSS 변수가 어떻게 작동하는지 모르면 이 W3Schools 기사를 보십시오.요컨대, 사용자 정의 CSS 속성을 설정할 수 있으며, CSS 규칙이 적용되는 요소에서 이 속성의 값을 변수로 사용할 수 있습니다.
예를 들어, --emoji-shape CSS 변수는 bokeh 조명 모양에 사용되는 문자나 텍스트를 저장합니다.bokeh effect wrapper div에 이 변수를 설정하고 다음 div에서 그 값을 사용합니다.
마찬가지로 CSS 코드에서 각 파기 광점에 서로 다른 색, 불투명도, 모호함과 밝기 값을 설정하는 것을 관찰한다.

약간 보키자바스크립트.

좀 더 편하게 살기 위해 bokeh JavaScript를 넣겠습니다.
만약 우리가 jQuery를 사용한다면, 우리는 boke 광점의 동태를 위해 divs을 만들 것이다. 아래와 같다.

const bokehCount = 25;
const $bokeh = $(".bokeh");
for (var i=0;i<bokehCount;i++){
  $bokeh.append($("<div/>"));
}

또한 다음 코드를 사용하여 bokeh 램프에 사용되는 하트 기호를 변경할 수 있습니다.

const heartSymbols = [..."♥❤♡❥❦❧♥"];
var idx = Math.round(Math.random()*(heartSymbols.length-1));
var symbol = heartSymbols[idx];
$bokeh.css({"--emoji-shape":`'${symbol}'`})

이 코드는 --emoji-shape 값을 heartSymbols 그룹의 하트 기호로 설정합니다.
확장 연산자로 불리는 ...(세 개의 JS 연산자)에 주의하십시오.기본적으로 하트 텍스트 기호를 포함하는 문자열을 하나의 그룹으로 변환합니다. 이 그룹은 idx 인덱스에 접근할 수 있습니다.
문자열을 단순히 수조로 사용하거나 String.charAt() 함수를 사용하는 것이 아니라 왜 내가 이러는지 알고 싶을지도 모른다.
이유는 다음과 같습니다.
사용된 하트형 텍스트 기호는 유니코드 문자이며 String.charAt() 함수를 사용하면 일부 문자에 전혀 영향을 주지 않습니다.예컨대 ❥

이제 귀찮은 독자들에게는

다음은 완전한 작업 코드입니다

코드 펜 Heart Shaped Bokeh

Gist on Github

Heart symbol 전체 목록 복사/붙여넣기

기타 text symbols에서 MockoFun 복사/붙여넣기

요컨대

CSS로 bokeh를 만들려면 몇 줄의 CSS만 필요합니다.SCS를 사용하여 보다 빠르고 동적인 결과를 얻을 수 있습니다.또한 일부 JS를 사용하여 이벤트를 더 빨리 시작하고 실행할 수 있습니다.여기에 일부 CSS 모호 필터와 텍스트 기호가 있는 위조 요소가 있는데, 당신은 매우 깔끔한bokeh CSS 효과를 얻을 수 있습니다.

연락을 유지하다

My Blog