[html] 使用svg画一个爱心
生活随笔
收集整理的這篇文章主要介紹了
[html] 使用svg画一个爱心
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[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>個人簡介
我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論
主目錄
與歌謠一起通關前端面試題
總結
以上是生活随笔為你收集整理的[html] 使用svg画一个爱心的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何了解自己的认知偏差_了解吸引力偏差
- 下一篇： 多尺度图像增强Retinex相关算法学习