svg成功失败图标动画

最新推荐文章于 2025-03-20 21:40:24 发布

JinmyHe

最新推荐文章于 2025-03-20 21:40:24 发布

阅读量1k

点赞数

分类专栏： web前端-动画图形文章标签： svg

本文链接：https://blog.youkuaiyun.com/weixin_42659625/article/details/107493685

版权

这篇博客展示了如何使用SVG技术制作成功的标志和失败的标志动画，通过精细的路径设计，为图标添加生动的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>svg 成功失败图标动画</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  html,body {
    width: 100%;
    height: 100%;
    font-size:62.5%; /*16px -- 10px*/
    background: rgba(0,0,0 );

    display: flex;
    justify-content: center;
    align-items: center;
  }
  

/*case begin*/
  #circle1 {
    stroke: #df2e30;
    stroke-width: 4;
    animation: circle-in 2s forwards;
  }
  .line1 {
    stroke: