主页 / 问题 / 1350214
Accepted
Alexandr_TT
Asked:2022-04-16 01:42:24 +0800 CST2022-04-16 01:42:24 +0800 CST

图标的 SVG 和 CSS 动画

  • 772

我有两个图标：一个处于原始状态，第二个图标被划掉。

我想为删除线设置动画，但更改dash-offset它并没有帮助，因为它们是两个不同的 svg。

我正在看这些动画图标，但仍然无法弄清楚神奇的部分。

在此处输入图像描述

我想问：过渡过程应该是怎样的？
我更喜欢使用pure CSS，可以吗？

@Mengo对图标​​问题的 SVG 线交叉动画的松散翻译。

css

2 个回答

  1. Best Answer

    链接中的动画图标非常复杂

    但基本上他们所做的是一个从右到左滑动的矩形遮罩，覆盖第一个图标并显示第二个图标。

    这是一个使用纯 CSS 的简化版本，希望它更清晰。

    svg {
  width: 100px;
  height: 100px;
}

/* сдвигает две маски влево при наведении курсора */
svg:hover #bottom-rect,
svg:hover #top-rect
{
  transition: transform 500ms;
  transform: translate(-24px, 0px);
}

/* сдвигает две маски вправо, когда они не hovered */
svg #bottom-rect,
svg #top-rect {
  transition: transform 500ms;
  transform: translate(0px, 0px);
}
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <defs>
        <mask id="bottom">
          <rect id="bottom-rect" width="24" height="24" fill="white" stroke="none"/>
        </mask>
        <mask id="top">
          <rect id="top-rect" x="24" width="24" height="24" fill="white" stroke="none"/>
        </mask>
    </defs>    
   
    <g mask="url(#bottom)">
      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
      <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
      <line x1="12" y1="19" x2="12" y2="23"></line>
      <line x1="8" y1="23" x2="16" y2="23"></line>
    </g>
    <g mask="url(#top)">
      <line x1="1" y1="1" x2="23" y2="23"></line>
      <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path>
      <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
      <line x1="12" y1="19" x2="12" y2="23"></line>
      <line x1="8" y1="23" x2="16" y2="23"></line>
    </g>
</svg>

    来自贡献者 @Paul LeBeau的答案的松散翻译 。

    • 4

  2. 链接中的动画图标非常复杂

    如果您尝试自己制作图标的动画。真的那么难吗？

    例如尝试为Running Infinity 图标设置动画

    在此处输入图像描述

    逐步创建图标动画：

    步骤1。在矢量编辑器中，绘制一个数字八并计算轮廓的总长度 -getTotalLength()

    <style>
.container {
width:10%;
height:auto;  
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100">
   <path id="path" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"  stroke="#151515" stroke-width="10"  />
</svg>
<script>
console.log('Полная длина :' + Math.round(path.getTotalLength()) +'px')
</script>

    第2步。我们使用 切出轮廓的一部分stroke-dasharray="202.75,54.25"，其中54.25是空格
    请注意：如果将破折号和空格的长度数字相加，则得到轮廓的最大长度257px

    <style>
.container {
width:8%;
height:auto;  
background:white;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100">
  
  <path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-dashoffset="27" stroke-dasharray="202.75,54.25" stroke="black" stroke-width="8" />
 </svg>

    步骤#3 添加路径旋转的动画stroke-dashoffset

    <animate  attributeName="stroke-dashoffset" values="257; 0" begin="svg1.click" 
  dur="1s" restart="whenNotActive" repeatCount="indefinite" />     


    <style>
.container {
width:8%;
height:auto;  
background:white;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100">
  
  <path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-dashoffset="27" stroke-dasharray="202.75,54.25" stroke="black" stroke-width="8"  >
        <animate  attributeName="stroke-dashoffset" values="257; 0" begin="svg1.click" dur="1s" restart="whenNotActive" repeatCount="indefinite" /> 
    </path> 
</svg>

    第4步 悬停时的图标旋转：hover

    添加到开始条件begin="svg1.mouseenter" end="svg1.mouseleave"

    <style>
.container {
width:8%;
height:auto;  
background:white;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100">
  
  <path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-dashoffset="27" stroke-dasharray="202.75,54.25" stroke="black" stroke-width="8"  >
        <animate  attributeName="stroke-dashoffset" values="257; 0" begin="svg1.mouseenter" end="svg1.mouseleave" dur="1s" restart="whenNotActive" repeatCount="indefinite" /> 
    </path> 
</svg>

    CSS动画选项

    开发SVG动画选项时，属性参数的必要值stroke-dasharray:202.75,54.25;和stroke-dashoffset

    仍然需要将它们转移到 CSS 规则中：

    .container {
width:8%;
height:auto;  
background:white;
}

#eight {
fill:none;
stroke:black;
stroke-width:8;
stroke-dasharray:202.75,54.25;
stroke-dashoffset:27px;
}
#svg1:hover #eight {
fill:#dedede;
animation:move 1s infinite linear;
}
@keyframes move {
0% {stroke-dashoffset:27px;}
100% {stroke-dashoffset:257px;}
}
    <div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100">
  
  <path id="eight" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" />
</svg>

    • 3

相关问题