·小白 - 2024-11-3 08:43
·悄然 - 2024-11-3 08:41
·飞飞 - 2024-11-2 08:59
·悄然 - 2024-11-2 08:56
·飞飞 - 2024-11-2 08:52
·小希 - 2024-11-2 08:49
·飞飞 - 2024-11-1 20:13
·小白 - 2024-11-1 20:11
·飞飞 - 2024-10-31 15:02
CSS关键帧动画:元素绕椭圆圆周运动的实现(一)
当一个元素的宽高尺寸不同,比如宽度大于高度,我们只需要设置好 border 和 border-radius 属性,即边框和边框角半径,就可以做出一个椭圆形的形状。看效果和代码:
400*240的宽高,1像素的实线边框,50%的边框角半径,椭圆形的框架就出来了。不过非常遗憾,它连跑道都不是,它只是一个场所——即一个父元素,我们的预期是它的子元素在这个椭圆上奔跑。好吧,我们需要在它上面安个真正的跑道,跑道就和这个框架一样并且相贴合。跑道的承建商是 svg,svg将 path 路径赋予子元素一个 offset-path 属性,字面意思是偏移路径,实际意义是创建一个路径,然后运动员身份的子元素在这条路径上以不同的 offset-distance 即偏移距离出现就产生了位置的转换即奔跑的效果。先来看看 li-zi 元素的CSS代码:
li-zi是我们自定义的一个元素名称,上面的代码是它的CSS样式:绝对定位、30*30的尺寸、梅红的背景色,第6行是关键,属性 offset-path 创建了一条无形的 svg 路径 path,路径的具体内容使用 svg 路径描述语言描述,在小括号里用小角引号包裹起来,大致意思是:这条路径,移动到 (0,120),从这个地方开始画一条弧线,再画一条弧线,两条弧线合起来就形成了椭圆形跑道。手绘这样的路径相对麻烦,可以使用工具,我这里做有一个,SVG基本图形转路径,选择svg基本图形中的椭圆即 ellipse 后设置好红色的数字,width、height 是父元素宽高,cx、cy是父元素椭圆圆心坐标,rx 是大圆半径,ry 是小圆半径,确定后如果满意,复制后边提供的路径数据就妥了。
将上面的 li-zi 代码加入到我们的路径工程,看看怎么样?完整代码:
效果:
从效果中大家应该能够发现:子元素一旦拥有 offset-path 属性,子元素的位置就会受到 offset-path 给出的 path 路径的影响,它已经去到了路径开始的地方 (0,120),但要特别注意,这需要一个前提:父元素相对定位 relative、子元素绝对定位 absolute。现在,我们要让 li-zi 小矩形移动起来,这需要用到 CSS关键帧动画 @keyframes 控制元素在偏移路径上的偏移距离 offset-distance,试看代码:
然后我们在 li-zi CSS样式代码中加入 animation 属性就大功告成:
上述 li-zi 元素做椭圆形运动的完整代码:
后续内容需要另开章节探讨,敬请期待。
评论列表 [3条]
#3 | 飞飞 于 2024-5-21 12:47 发布: 粒子又可以改为图片,这个太灵活了,大爱这个可变化的粒子。乐。。
#2 | 悄然 于 2024-5-21 12:46 发布: 这个400、240的椭圆加了边线显示~~下方的路径和它完全重合~~本来觉得难,老师给了制作方法,也是太贴啦。。
#1 | 了了 于 2024-5-21 12:41 发布: 老师开路径课程了。。呱唧呱唧。。。掌声响起来