html - 如何在 SVG 标签上循环 CSS 动画
问题描述
所以我的代码工作得很好,它在<svg>
标签上创建了一个笔画动画!
问题是动画只重复一次(当我刷新页面时)
我想无限循环动画,但我不知道怎么做!
body{
background-color: yellow;
}
#logo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: fill 0.6s ease forwards 1.3s;
}
#logo path:nth-child(1) {
stroke-dasharray: 788.711181640625px;
stroke-dashoffset: 788.711181640625px;
animation: line-anim 1.2s ease forwards;
}
@keyframes line-anim{
to{
stroke-dashoffset: 0;
}
}
@keyframes fill {
from{
fill: transparent;
}
to{
fill: white;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<svg id="logo" width="313" height="302" viewBox="0 0 313 302" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M223.4 157.2C232.2 160.1 237 169.6 234.1 178.4C231.8 185.3 225.4 189.9 218.2 189.9C211.2 189.9 205 185.6 202.5 179.1H184.7C182.3 179.1 180.2 177.5 179.4 175.3L173.9 158.8L156.6 219.4C155.9 221.8 153.7 223.4 151.2 223.4H150.9C148.3 223.3 146.1 221.3 145.7 218.8L127.8 111.3L114.7 174.9C114.1 177.4 111.9 179.1 109.3 179.1H84.2C81.1 179.2 78.5 176.8 78.4 173.7C78.3 170.6 80.7 168 83.7 167.9C83.9 167.9 84 167.9 84.2 167.9H104.9L123.4 82.4C124.1 79.4 127.2 77.5 130.2 78.3C132.4 78.8 134.1 80.7 134.4 82.9L152.7 192.5L168.2 138.3C168.9 136 171 134.3 173.4 134.3H173.5C175.9 134.3 178 135.9 178.8 138.1L188.7 167.9H202.3C205.1 159.1 214.6 154.3 223.4 157.2Z" stroke="black" stroke-width="5"/>
<path d="M313 85.4C313 113.2 300.8 152.7 277.1 185.1C231.9 247 156.7 301.1 156.7 301.1C156.7 301.1 81.5 247 36.3 185.1C12.5 152.6 0.399994 113.2 0.399994 85.4C0.399994 38.8 38 0.9 84.6 0.5H85.4C115.2 0.5 141.6 16.3 156.8 39.6C172 16.3 198.4 0.5 228.2 0.5H229C275.5 0.9 313 38.8 313 85.4ZM234.1 178.4C237 169.6 232.2 160.1 223.4 157.2C214.6 154.3 205.1 159.1 202.2 167.9H188.6L178.7 138.1C177.9 135.8 175.8 134.3 173.4 134.3H173.3C170.9 134.3 168.7 136 168.1 138.3L152.6 192.5L134.3 82.9C133.9 80.6 132.3 78.8 130.1 78.3C127.1 77.6 124 79.4 123.3 82.4L104.8 167.9H84.1C83.9 167.9 83.8 167.9 83.6 167.9C80.5 168 78.1 170.6 78.3 173.7C78.4 176.8 81 179.2 84.1 179.1H109.2C111.8 179.1 114 177.4 114.6 174.9L127.7 111.3L145.6 218.8C146 221.4 148.2 223.3 150.8 223.4H151.1C153.6 223.4 155.8 221.8 156.5 219.4L173.8 158.8L179.3 175.3C180.1 177.6 182.2 179.1 184.6 179.1H202.4C204.9 185.6 211.1 189.9 218.1 189.9C225.4 189.9 231.8 185.3 234.1 178.4Z" fill="#6C63FF"/>
</svg>
</body>
</html>
解决方案
尝试infinite
在动画中添加道具:
#logo path:nth-child(1) {
stroke-dasharray: 788.711181640625px;
stroke-dashoffset: 788.711181640625px;
animation: line-anim 1.2s ease forwards infinite;
}
推荐阅读
- json - 如何通过传递输入键使用jq从json中提取特定字段值
- javascript - 为什么在源代码上看不到 DOM 结构?
- image - 如何从 Steam 游戏中获取图片的哈希?
- ruby - 如何在 Ruby 中编写一个方法,将传入的字符串增加 X 个随机字符
- java - 从目录路径获取android uri
- webpack - Webpack-dev-server 插件点击钩子
- c++ - 使用 OpenCV 2.4.9 构建 ROS 包时出现问题
- python - 让 Pandas 找到缺失值并显示它们
- reactjs - 如何将我的 sass 变量分配给所有 React 组件?
- javascript - Babel + Jest 配置