CSS和D3制作小鱼游动的交互动画效果
发布时间:2020-05-13 13:54:35
来源:亿速云
阅读:118
作者:Leah
本篇文章主要探讨如何用CSS和D3制作小鱼游动的交互动画效果。有一定的参考价值,有需要的朋友可以参考一下,跟随小编一起来看解决方法吧。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 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: