css animation配合SVG制作能量流动效果


Posted in HTML / CSS onMarch 24, 2021

最终效果如下:

css animation配合SVG制作能量流动效果

动画分成两步

  • 制定运行轨迹
  • 创建DOM并按照轨迹动画

制定运行轨迹

我们先要画一条底部的淡蓝色半透明路劲做为能量流动的管道
这里用SVG的path去做(其实这里可以直接用背景图), 代码如下:

<!-- 代码是用react写的, 删除了遍历以及部分代码 -->
 
<svg>
    <!-- 工具描述提示符,被用在fill里做过滤等操作,这里是小球底部的发光 -->
    <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style={{ stopColor: "rgba(2,246,255,.5)" }} />
            <stop offset="100%" style={{ stopColor: "rgba(2,246,255,0)" }} />
        </radialGradient>
    </defs>
    <!-- 这里遍历N个淡蓝色线条路径 d为路径-->
    <path d={item.path} stroke="rgba(29,159,167,0.4)" fill="transparent" strokeWidth={5}></path>
    ...
    <!-- 这里是发光小球 通过两个圆叠加形成 -->
    <g>
        <circle cx={cx} cy={cy} r="15" fill="url(#grad1)"></circle>
        <circle cx={cx} cy={cy} r="5" fill="rgba(2,246,255)"></circle>
    </g>
</svg>

创建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%;
    }
}

 

HTML / CSS 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
如何通过 CSS 写出火焰效果
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 #HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 #HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 #HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 #HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 #HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 #HTML / CSS
You might like
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
理解Python中的类与实例
2015/04/27 Python
python3音乐播放器简单实现代码
2020/04/20 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python删除字符串中指定字符的方法
2018/08/13 Python
详解Python中的type和object
2018/08/15 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python 绘制正态曲线的示例
2020/09/24 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
绩效工资分配方案
2014/01/18 职场文书
全国道德模范事迹
2014/02/01 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
教师工作表现评语
2014/12/31 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
初中生物教学反思
2016/02/20 职场文书