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 相关文章推荐
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 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 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
利用python获取Ping结果示例代码
2017/07/06 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
平面设计岗位职责
2013/12/14 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
员工培训邀请函
2014/01/11 职场文书
初婚初育证明
2014/01/14 职场文书
合作协议书模板2014
2014/09/26 职场文书
2014年检验员工作总结
2014/11/19 职场文书
经典导游欢迎词
2015/01/26 职场文书
服务员岗位职责
2015/02/03 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
风之谷观后感
2015/06/11 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书