위 그림의 눈송이 효과는 꽤 멋지지 않나요? 어떻게 구현할까요? Less에는 다음 두 가지 기능을 사용하여 시나리오를 구현할 수 있습니다.
1. 재귀 호출
사실 레스는 자바스크립트의 for 루프처럼 자체 함수가 없지만, 조건 판단을 구현할 시기를 안내하고, 간단한 방법을 통해 똑똑한 프로그래머도 재귀 호출을 간단한 방법으로 구현할 수 있습니다.
. Snow(@n) when (@ n & gt0) {
Fn()// 눈 함수 Fn(
을 생성합니다. Snow((@ n-1)); //함수 fn()을 다시 실행합니다.
}
. Snow(60); // 2번을 실행합니다. 자바스크립트 표현식 컴파일을 피하세요.
Snow는 난수를 생성해야 합니다. 더 적은 코드에 자바스크립트 표현식을 포함해야 하고, 자바스크립트 표현식이 오류 없이 컴파일되지 않도록 두 가지를 이해해야 합니다.
LESS가 모르는 일부 독점 구문 앞에 ~를 붙일 수 있고,
더 적은 파일에 사용되는 자바스크립트 표현식은 역따옴표로 묶어 사용할 수 있습니다.
그래서 아래에 임의의 변위, 임의의 시간, 임의의 크기 코드가 있습니다.
이보다 적은 코드가 아래에 있습니다. 구현 방법에 대한 자세한 코드 코멘트를 계속 지켜봐 주세요.
이 비교적 적은 양의 아래 코드는 각 눈송이의 크기, 수평 변위, 수직 변위, 다른 시간의 출현 위치, 눈송이 크기가 다르고 떨어지는 속도가 다른 임의의 CSS 고정 눈송이 파일을 생성하기 위해 구성되었습니다. 육안으로 보이는 눈송이는 무작위이며, 프로젝트가 시작되기 전에 몇 번 만들어서 창에 고르게 분포된 무작위 눈송이를 얻을 수 있습니다.
* {
패딩:0;
여백:0;
}
html, body {
높이:100%;
}
/// 브라우저 창 너비
@ window width:750;
//// 눈송이
. 눈
& amp_line breaks{
위치:상대적;
폭:~ " @ { windowWidth } px
높이:100%;
overflow:hidden;
background:rgba(14, 99, 69, 1);
margin:0 auto;
}
///눈송이 초기화 크기
위치:절대;
폭:20px
높이:20px
& amp:in {
content:"";
위치:절대;
<> p>left:0;top:0;
width:20px
height:20px
backgroundcolour:# fff
opacity:1;
borderradius:100%;
filter:blur(5px);//여기 눈송이는 css3 필터로 그려져 있습니다.
}
}
// 랜덤 눈송이 함수
. snow(@n) when (@ n & gt0) {
. snow_@{n}{
>
// 수평 변위
left:~ " ` math . round(math . random()* @ @ { window width })` px";
// 애니메이션은 8~12초 동안 실행되어 눈송이의 이동 속도가 달라지도록 합니다.
애니메이션:~ " snowani _ @ { n } `(-math . random()* 4+8). toFixed "선형 무한";
// 애니메이션이 더 일찍, 즉 수직으로 변위되어 나타납니다.
Animation-delay:~"`(-Math.random() * 8 + 0.2). to fixed(2) ` s";
& amp:at {
//눈송이 크기는 0.5에서 1.2 사이로 랜덤화됩니다.
transform:~ " scale(`(math . random()* 0.7+0.5). to fixed(2)`)";
}
}
@keyframes ~"snowani_@{n}" {
0%{
transform:translate y(0);
}
100%{
// 수직 높이에 따라 눈송이의 이동 속도가 달라집니다.
transform:~ " translate y(` math . round(math . random()* 200+1600)` px)";
}
}
. Snow((@ n-1));
}
. Snow(60); // 생성되는 눈송이 개수는 다음과 같습니다.
그리고 HTML, 코드 한 줄
편집기에 emmet 또는 웹스톰을 설치하고 emmet을 연 후 다음 코드를 입력하고 단축키 ctrl+e를 누르면 이름이 다른 눈송이 태그 60개를 생성합니다.