CSS와 D3를 사용하여 작은 물고기가 수영하는 대화형 애니메이션을 구현하는 방법(코드 포함)

이 문서의 내용은 CSS와 D3를 사용하여 작은 물고기가 수영하는 대화형 애니메이션을 구현하는 방법에 대한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다. . 돕다.

효과 미리보기

소스 코드 다운로드

https://github.com/comehope/front-end-daily-challenges

코드 해석

컨테이너에 포함된 하위 요소인 dom을 정의합니다. 물고기의 몸, 눈, 등지느러미, 꼬리를 각각 나타냅니다.

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

페이지 스타일을 스크롤 막대 없이 전체 화면으로 설정합니다.

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: #222;
    overflow: hidden;
}

물고기의 컨테이너 크기를 정의합니다. --r 는 기본 크기 단위이며 이후의 모든 크기는 이를 기준으로 계산됩니다. --r 是一个基本尺寸单位，后续所有尺寸都是基于它计算的：

.fish {
    position: absolute;
    --r: 15vw;
    width: calc(var(--r) + var(--r) / 3);
    height: calc(var(--r) * 2);
    left: 50%;
    top: 100px;
}

画出鱼的身体，同时把鱼的颜色声明到父类中，因为下面还会用到这个颜色：

.fish {
    color: hsl(0, 50%, 50%);
}

.fish .body {
    position: absolute;
    border: var(--r) solid transparent;
    border-right-color: currentColor;
    border-left-style: none;
}

画出鱼的眼睛：

.fish .eye {
    position: absolute;
    --r1: calc(var(--r) / 4);
    width: var(--r1);
    height: var(--r1);
    background-color: #111;
    border-radius: 50%;
    top: 35%;
    left: 30%;
}

画出鱼的背鳍：

.fish .fin {
    position: absolute;
    --r2: calc(var(--r) / 2);
    border-bottom: var(--r2) solid;
    border-left: var(--r2) solid transparent;
    filter: brightness(2.5);
    left: calc(var(--r) - var(--r2));
}

画出鱼的尾巴：

.fish .tail {
    position: absolute;
    --r3: calc(var(--r) / 3);
    border: var(--r3) solid transparent;
    border-right-color: currentColor;
    border-left-style: none;
    right: 0;
    top: calc(var(--r) - var(--r3));
}

增加让鱼游动的动画效果，不是循环执行，而是只执行一次：

.fish {
    right: calc(var(--r) * -1);
    animation: run 3s linear forwards;
}

@keyframes run {
    to {
        right: 100%;
    }
}

再增加鱼游动时摇摆的动画效果：

.fish {
    animation: 
        run 3s linear forwards,
        shake 0.3s linear infinite;
}

@keyframes shake {
    50% {
        transform: rotateY(-30deg);
    }

    100% {
        transform: rotateY(30deg);
    }
}

接下来设置一些变量，以便创建不同样子的鱼：

鱼的大小的变量 --size，数值越大尺寸越大：

.fish {
    --size: 5;
    --r: calc(var(--size) * 1vw);
}

鱼的颜色变量 --color，表示色相环的角度：

.fish {
    --color: 0;
    color: hsl(var(--color), 50%, 50%);
}

鱼从右侧游到左侧的时长，时长越短游得越快：

.fish {
    --duration: 3;
    animation: 
        run calc(var(--duration) * 1s) linear forwards,
        shake 0.3s linear infinite;
}

鱼出现的高度，数据越大越靠近页面下部：

.fish {
    --top: 100;
    top: calc(var(--top) * 1px);
}

接下来用 d3 来批量处理 dom 元素和 css 变量。
引入 d3 库：

<script></script>

删除掉 html 中的 .fish 元素和 css 文件中的变量声明代码。创建一个函数，用于生成一条鱼。css 变量的值均为随机生成，--size 的取值范围是 5 ~ 8，--color 的取值范围是 -60 ~ 15，--duration 的取值范围是 3 ~ 6，--top

function buildFish() {
    let fish = d3.select('body')
        .append('p')
        .attr('class', 'fish')
        .style('--size', d3.randomUniform(5, 8)())
        .style('--color', d3.randomUniform(-60, 15)())
        .style('--duration', d3.randomUniform(3, 6)())
        .style('--top', d3.randomUniform(100, 300)());
    
    fish.append('span').attr('class', 'body');
    fish.append('span').attr('class', 'eye');
    fish.append('span').attr('class', 'fin');
    fish.append('span').attr('class', 'tail');
}

물고기의 몸체를 그리고 물고기의 색상을 상위 클래스에 선언합니다. 이 색상이 아래에서 사용되기 때문입니다.

function buildFish(e) {
    //略....
    .style('--top', e.clientY);
}

window.addEventListener('click', buildFish);

Draw 물고기의 눈:

.fish {
    top: calc(var(--top) * 1px - var(--r));
}

Draw 물고기의 등지느러미 그리기:

function buildFish(e) {
    //略....
    .style('--top', e ? e.clientY : d3.randomUniform(100, 300)());
}

d3.range(3).forEach(buildFish);

물고기의 꼬리 그리기:

rrreee

물고기가 헤엄치도록 애니메이션 효과를 추가합니다. 반복 실행되지 않고 한 번만 실행됩니다.

rrreee

그런 다음 물고기가 헤엄칠 때 흔들리는 애니메이션 효과를 추가하세요.

rrreee다음으로, 다른 모양의 물고기를 만들 수 있도록 몇 가지 변수를 설정하세요.

물고기 크기 변수 --size, 값이 클수록 크기:

rrreee색상 원의 각도를 나타내는 물고기 색상 변수--color: rrreee
물고기가 오른쪽에서 왼쪽으로 헤엄치는 시간. 시간이 짧을수록 헤엄치는 속도가 빨라집니다:

rrreee🎜물고기가 나타나는 높이, 데이터가 클수록 페이지에 가까워집니다. 하단: 🎜rrreee🎜 다음으로 d3를 사용하여 DOM 요소와 CSS 변수를 일괄 처리합니다. . 🎜d3 라이브러리 소개: 🎜rrreee🎜html의 .fish 요소와 CSS 파일의 변수 선언 코드를 삭제하세요. 물고기를 생성하는 함수를 만듭니다. CSS 변수의 값은 무작위로 생성됩니다. --size의 값 범위는 5~8입니다. --color의 값 범위는 -60~15입니다. >--duration의 값 범위는 3~6이고, --top의 값 범위는 100~300입니다. 🎜rrreee🎜마우스 클릭 이벤트를 바인딩합니다. 눌림 페이지가 로드되면 물고기가 생성됩니다: 🎜rrreee🎜 그리고 물고기의 입과 클릭 위치가 수평선에 있습니다: 🎜rrreee🎜 마지막으로 페이지가 로드될 때 페이지가 로드되는 것을 방지하기 위해 3개의 물고기가 자동으로 생성됩니다. 로드 후 공백: 🎜rrreee 🎜완료되었습니다! 🎜🎜관련 권장 사항: 🎜🎜🎜순수 CSS를 사용하여 은박지를 찢는 텍스트 효과를 얻는 방법(코드 포함) 🎜🎜🎜🎜순수 CSS를 사용하여 모래시계의 애니메이션 효과를 얻는 방법 🎜 🎜🎜

위 내용은 CSS와 D3를 사용하여 작은 물고기가 수영하는 대화형 애니메이션을 구현하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!