时间:2021-05-08
最终效果如下:
动画分成两步
制定运行轨迹
我们先要画一条底部的淡蓝色半透明路劲做为能量流动的管道
这里用SVG的path去做(其实这里可以直接用背景图), 代码如下:
创建DOM并按照轨迹动画
这里的核心原理通过offset-path这个属性设置运动偏移路径,再通过offset-distance来设置偏移量,这样通过css3 animation就可以让元素按照一定的轨迹运动
<!-- 这里要保证盒子跟SVG的盒子位置重合,宽高一致,这样路径点才能一致 --><div className={styles.animate}> <!-- 这里遍历N个div,让每一个div都按照offsetPath也就是svg内path的d的值进行流动 --> <!-- animationDelay 负数表示渲染前就已经执行, 渲染时就可以铺满整个路径 --> <div key={index} className={styles.point3} style={{ "offsetPath": "path('M 105 34 L 5 34')", "animationDelay": `-${index * 1}s`, "animationDuration": '5s', 'animationPlayState': `${stop ? 'paused' : 'running'}` }}></div> ...</div>.point3 { width: 10px; height: 2px; // offset-path: path('M 248 108 L 248 172 L 1510 172'); offset-distance: 0%; animation: flow 20s linear normal infinite; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 10%, #FEFE02); position: absolute; left: 0; right: 0;}}@keyframes flow { from { offset-distance: 0%; } to { offset-distance: 100%; }}到此这篇关于css animation配合SVG制作能量流动效果的文章就介绍到这了,更多相关css animation配合SVG内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
无需JavaScript,imagery,canvas或者SVG,就可以利用最新的CSS制作出3D立方体,这的确是一件让人难以想象的事情。目前制作出来的效果,只
简介Animation可以让你不用依赖javascript或jquery,用纯CSS在网页中轻松实现各种动画效果。兼容性animation在绝大部分主流浏览器都
不依赖javascript,直接使用纯css实现svg的描边绘制动画效果,效果演示动画。基础知识:SVG中有个比较重要的属性分支stroke,中文软件中称为&l
效果思路用css的animation属性做动画代码wxml:请选择商品点击弹出提示wxss:.container{height:100%;display:fle
CSS3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下Transition属性。transition属性是一个