2023年6月20日发(作者：)

⽤HTML和CSS3做个鱼,如何使⽤CSS和D3实现⼩鱼游动的交互动画（附代码）本篇⽂章给⼤家带来的内容是关于如何使⽤CSS和D3实现⼩鱼游动的交互动画(附代码)，有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对你有所帮助。效果预览源代码下载代码解读定义 dom，容器中包含的⼦元素分别代表鱼的⾝体、眼睛、背鳍和尾巴：设置页⾯样式为全屏且没有滚动条：body {margin: 0;width: 100vw;height: 100vh;background-color: #222;overflow: hidden;}定义鱼的容器尺⼨，--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 库：删除掉 html 中的 .fish 元素和 css ⽂件中的变量声明代码。创建⼀个函数，⽤于⽣成⼀条鱼。css 变量的值均为随机⽣成，--size 的取值范围是 5 ~ 8，--color 的取值范围是 -60 ~ 15，--duration 的取值范围是 3 ~ 6，--top 的取值范围是 100 ~ 300：functionbuildFish() {let fish = ('body').append('p').attr('class', 'fish').style('--size', Uniform(5, 8)()).style('--color', Uniform(-60, 15)()).style('--duration', Uniform(3, 6)()).style('--top', Uniform(100, 300)());('span').attr('class', 'body');('span').attr('class', 'eye');('span').attr('class', 'fin');('span').attr('class', 'tail');}绑定⿏标单击事件，当按下⿏标时就⽣成⼀条鱼：function buildFish(e) {//略.....style('--top', Y);}ntListener('click', buildFish);并且让鱼的嘴部和点击的位置在⼀条⽔平线上：.fish {top: calc(var(--top) * 1px - var(--r));}最后，在页⾯载⼊时⾃动⽣成 3 条鱼，以免页⾯载⼊后⼀⽚空⽩：function buildFish(e) {//略.....style('--top', e ? Y : Uniform(100, 300)());}(3).forEach(buildFish);⼤功告成！相关推荐：

2023年6月20日发(作者：)

⽤HTML和CSS3做个鱼,如何使⽤CSS和D3实现⼩鱼游动的交互动画（附代码）本篇⽂章给⼤家带来的内容是关于如何使⽤CSS和D3实现⼩鱼游动的交互动画(附代码)，有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对你有所帮助。效果预览源代码下载代码解读定义 dom，容器中包含的⼦元素分别代表鱼的⾝体、眼睛、背鳍和尾巴：设置页⾯样式为全屏且没有滚动条：body {margin: 0;width: 100vw;height: 100vh;background-color: #222;overflow: hidden;}定义鱼的容器尺⼨，--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 库：删除掉 html 中的 .fish 元素和 css ⽂件中的变量声明代码。创建⼀个函数，⽤于⽣成⼀条鱼。css 变量的值均为随机⽣成，--size 的取值范围是 5 ~ 8，--color 的取值范围是 -60 ~ 15，--duration 的取值范围是 3 ~ 6，--top 的取值范围是 100 ~ 300：functionbuildFish() {let fish = ('body').append('p').attr('class', 'fish').style('--size', Uniform(5, 8)()).style('--color', Uniform(-60, 15)()).style('--duration', Uniform(3, 6)()).style('--top', Uniform(100, 300)());('span').attr('class', 'body');('span').attr('class', 'eye');('span').attr('class', 'fin');('span').attr('class', 'tail');}绑定⿏标单击事件，当按下⿏标时就⽣成⼀条鱼：function buildFish(e) {//略.....style('--top', Y);}ntListener('click', buildFish);并且让鱼的嘴部和点击的位置在⼀条⽔平线上：.fish {top: calc(var(--top) * 1px - var(--r));}最后，在页⾯载⼊时⾃动⽣成 3 条鱼，以免页⾯载⼊后⼀⽚空⽩：function buildFish(e) {//略.....style('--top', e ? Y : Uniform(100, 300)());}(3).forEach(buildFish);⼤功告成！相关推荐：