하트형 웨이브 CSS 효과
이 CSS 자습서에서는 하트형 bokeh CSS 효과를 만드는 방법을 보여 드리겠습니다.같은 코드를 사용하여 다른 형태의 CSS bokeh 효과를 만들 수도 있습니다.
이것은 우리가 제작할 bokeh CSS 효과입니다.
귀찮은 독자들에게:
Heart symbol 전체 목록 복사/붙여넣기
보크가 뭐예요?
촬영에서 보키는 이미지의 초점을 잃은 부분에서 발생하는 모호한 심미적 품질을 가리킨다.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;
}
별다른 것은 없다. 단지 화면 전체를 덮어야 할 어두운 구역들 뿐이다.다음에 우리는 이 항목에 대해 상수 변수를 정의할 것이다.
$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 symbol 전체 목록 복사/붙여넣기
요컨대
CSS로 bokeh를 만들려면 몇 줄의 CSS만 필요합니다.SCS를 사용하여 보다 빠르고 동적인 결과를 얻을 수 있습니다.또한 일부 JS를 사용하여 이벤트를 더 빨리 시작하고 실행할 수 있습니다.여기에 일부 CSS 모호 필터와 텍스트 기호가 있는 위조 요소가 있는데, 당신은 매우 깔끔한bokeh CSS 효과를 얻을 수 있습니다.
연락을 유지하다
My Blog
Reference
이 문제에 관하여(하트형 웨이브 CSS 효과), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codingdudecom/heart-shape-bokeh-css-effect-23p6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)