하트형 웨이브 CSS 효과

14716 단어 bokehfiltercsseffect
출처: 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

    좋은 웹페이지 즐겨찾기