css3 轨迹动画-cssanimation结合SVG制作能量流效果

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

最终疗效如下：

动画分两步

拟定轨迹

我们首先需要在顶部画一条浅黄色半透明的道路css3 轨迹动画，作为能量流动的管道

这里我们使用SVG的路径来做（虽然这里可以直接使用背景图片），代码如下：

创建 DOM 并根据轨迹制作动画

这里的核心原理是通过offset-path属性设置运动偏转路径css3 轨迹动画，然后通过offset-distance设置偏转量，从而让元素通过css3animation按照一定的轨迹移动

    
    
    

    ...

.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%;
    }
}

关于cssanimation结合SVG做出能量流疗效的这篇文章到此结束。 更多关于cssanimation结合SVG的相关内容，请搜索脚本之家之前的文章或者继续浏览下面的相关文章。 希望大家在以后的家里多多支持剧本！