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 库：
删除掉 html 中的 .fish 元素和 css ⽂件中的变量声明代码。创建⼀个函数，⽤于⽣成⼀条鱼。css 变量的值均为随机⽣成，--size 的取值范围是 5 ~ 8，--color 的取值范围是 -60 ~ 15，--duration 的取值范围是 3 ~ 6，--top 的取值范围是 100 ~ 300：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);
并且让鱼的嘴部和点击的位置在⼀条⽔平线上：.fish {
top: calc(var(--top) * 1px - var(--r));
}
最后，在页⾯载⼊时⾃动⽣成 3 条鱼，以免页⾯载⼊后⼀⽚空⽩：function buildFish(e) {
//略....

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。