[html] 使用svg画一个爱心
<head><style>*,*:before,*:after {box-sizing: border-box;margin: 0;padding: 0;}.heart-loader {position: absolute;display: block;left: 50%;top: 50%;margin-top: -90px;width: 180px;height: 180px;overflow: visible;transform-origin: 0 90px;animation: rotate-anim 3s infinite;}.heart-loader__heartPath {stroke: #E21737;fill: transparent;stroke-dasharray: 308.522, 308.522;stroke-dashoffset: 308.522;animation: heart-anim 3s infinite;}/* 翻转 */@keyframes rotate-anim {0% {transform: rotate(-45deg);}90% {transform: rotate(-45deg);opacity: 1;}97% {transform: rotate(-45deg);opacity: 0;}100% {transform: rotate(-45deg);opacity: 0;}}/* 爱心动画 */@keyframes heart-anim {40% {stroke-dashoffset: 308.522;fill: transparent;}55% {stroke-dashoffset: 0;fill: transparent;}72% {stroke-dashoffset: 0;fill: #E21737;}100% {stroke-dashoffset: 0;fill: #E21737;}}</style>
</head><body><svg class="heart-loader" viewBox="0 0 90 90" version="1.1"><path class="heart-loader__heartPath" stroke-width="2" d="M60,30 a30,30 0 0,1 0,60 L0,90 0,30 a30,30 0 0,1 60,0"></path></svg>
</body>
个人简介
我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
![java args eclipse_不会在eclipse中运行含有args[]参数的Java代码，求指导](http://pic.xiahunao.cn/java args eclipse_不会在eclipse中运行含有args[]参数的Java代码，求指导)
![[html] 使用svg画一个三角形](http://pic.xiahunao.cn/[html] 使用svg画一个三角形)
![[html] 说说你对HTML5中pattern属性的理解](http://pic.xiahunao.cn/[html] 说说你对HTML5中pattern属性的理解)
中检测第一行和最后一行？)
的正确方法)
![[html] 你是如何区分HTML和HTML5的？](http://pic.xiahunao.cn/[html] 你是如何区分HTML和HTML5的？)
)
![[html] html的属性值有规定要使用单引号还是双引号吗？](http://pic.xiahunao.cn/[html] html的属性值有规定要使用单引号还是双引号吗？)
与.detach()的区别)
![[html] 直接使用b标签和使用css的font-weight有什么区别？](http://pic.xiahunao.cn/[html] 直接使用b标签和使用css的font-weight有什么区别？)
：反向运动学(上))