效果：

代码：

HTML </>

<div><svg><!-- 折线路径 --><path class="st0" d="M319,337c0,0-20.03-3.67-28,13c0,0,4.82,16.81,32,13l27,7l17-26l32,45l20-26l28,2l10-1c0,0,23.38-0.18,28-14c0,0-1.81-16-27-13"/><!-- 爱心路径 --><path class="st1" d="M388,328c0,0-11.67-21.64-35-19c-23.33,2.64-29.91,21.29-32,29c-2.09,7.71,0,28.08,10,38s30.89,30.92,57,49c0,0,24.75-13.95,58-50c0,0,15.64-17.61,11-35c0,0-1.49-30-34-30C423,310,407.59,305.53,388,328z"/></svg>
</div>

CSS </>

关键代码：

ffill: none; 闭环路径填充（颜色等）；
stroke-width: 5px; 路径的粗细；
stroke-linecap: round;

stroke-linejoin: round; 路径顶点处的样式；
stroke: #dd5969; 路径颜色
stroke-dasharray: 0,322; 路径长度；
stroke-dashoffset: 0; 路径偏移量；

注意⚠️：由于此路径数据起始位置不在左上角；此处因此使用定位。

<style>body {background-color: #000;}div {margin: 200px auto;position: relative;width: 200px;height: 200px;animation: scale 3s linear infinite;}svg {position: absolute;left: -288px;top: -300px;width: 600px;height: 600px;}path {fill: none;stroke-width: 5px;stroke-linecap: round;stroke-linejoin: round;stroke: #dd5969;}.st0 {stroke-dasharray: 0, 322;stroke-dashoffset: 0;/* 保留最后一帧 */animation: run 2s infinite forwards;}@keyframes run {0% {stroke-dasharray: 0,322;}100% {stroke-dasharray: 322,322;}}@keyframes scale {0% {transform: scale(1);}42% {transform: scale(1);}46% {transform: scale(1.2);}50% {transform: scale(1);}54% {transform: scale(1.2);}58% {transform: scale(1);}/* 100% {transform: scale(1);} */}</style>

JavaScript </>

注意⚠️：我们一开始不知道路径长度，使用getTotalLength()方法可以轻松获取！

<script>var path = document.querySelector("path");console.log(path.getTotalLength()); // 332
</script>

SVG实现网易云心动动画（HTML+CSS）相关推荐

网易云静态页面(Html + Css)
苦难是化了妆的幸福,有苦有乐的人生才是充实的!!! 效果图: 项目简介: 该项目使用 Html + Css 实现使用 Less(css预处理器)来编写页面样式,采用 flex 进行布局技术栈: H ...
android 网易云音乐上滑动画,Android_Activity切换动画OverridePendingTransition（Cover 网易云音乐动画）...
今天我想讲一个研究别人好动画的方法,并实现出来,我是网易云音乐的铁粉啊,很喜欢网易音乐那个开屏切换动画,还有点击一个页面然后返回的那个退出动画,所以呢,我把它实现出来了,还是蛮开心的,依然,我不讲那个 ...
微信小程序网易云音乐播放界面
微信小程序网易云效果图 HTML JS CSS 效果图 HTML <view class="box"><view class ...
如何借助SVG+CSS用2个小时撸完一个网易云音乐的动效海报（可控制速度）
因为平时也关注网易UEDC的订阅号,前几天就看到了这么一个动效,主题是<网易云音乐2018年度听歌报告>,内容是一个人在努力蹬车因为构图简单,创意又不错,所以就试了下用SVG+CSS动画实 ...
使用css动画实现网易云音乐播放界面波浪动画效果
通过实现CSS实现仿网易云音乐播放界面动画效果,最终的效果如下界面布局图片也是实现滚动效果的,使用四个div,来标识每一帧波动的效果. <div class="container- ...
仿网易云官网轮播图 html+css+js
效果: 可自动轮播,左右箭头按钮和下方小圆点可切图,鼠标移入时停止自动轮播. 视频演示: [html+css+js]仿网易云轮播图实现(后面有完整源码): 1. 定义标签,看注释: <!-- ...
网易云课堂Nodejs笔记（js Function，css，写法)
网易云课堂Nodejs笔记(js Function,css) CSS position ---网页定位 margin ---元素外边距 padding ---元素内边距 nth-child()选择器 ...
Vue + Element + animate.css 音乐网站（网易云版）
Vue + Element + animate.css 音乐网站一.前言这是小弟的毕业设计,也是第一次用vue框架独立开发网站,现在接入了网易云api,到后面我还会做对应的后端和管理端.因为是第一 ...
使用HTML+CSS制作网易云轮播
使用HTML和CSS制作网易云轮播今天现来说说使用CSS的动画技术来实现轮播.现看看效果图这里是八张图片渐入渐出的效果轮播. html代码: <!DOCTYPE html&g ...
Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路...
Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路先看一看我的代码运行结果. 代码运行起来初始化状态: 点击开始按钮,唱片机的机械臂匀速接近唱片磁盘,同时唱片磁盘也 ...

SVG实现网易云心动动画（HTML+CSS）

效果：

代码：

HTML </>

CSS </>

关键代码：

注意⚠️：由于此路径数据起始位置不在左上角；此处因此使用定位。

JavaScript </>

注意⚠️：我们一开始不知道路径长度，使用getTotalLength()方法可以轻松获取！

SVG实现网易云心动动画（HTML+CSS）相关推荐

最新文章

热门文章