仅CSS动画-如何填充svg心脏图标

(W3 验证器的解决方案清洁可以在本文的底部找到)

(W3 验证器的解决方案清洁可以在本文的底部找到)

我的任务的目标很简单:

有一个“心脏”图标,用户可以点击并将其填充为红色(心脏需要缓慢填充);

理想情况下,用户可以再次单击“填充的心脏”以将其清空(与机械师不同);

哦,最后一个要求:只有 html 和 css / scss 允许在船上。

我有麻烦首先使心脏图标。我检查了网络的各种解决方案,从自己设计的代码行到导入图像。最后,我决定导入一个.svg 文件 [从这个网站] [1] 和这个代码:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Ilrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 40.508 40.508" style="enable-background:new 0 0 40.508 40.508;" xml:space="preserve">
<g>
    <path style="fill:#010002;" d="M3.023,20.822c0.019,0.031,0.042,0.059,0.066,0.083l15.918,16.914
        c0.115,0.122,0.271,0.192,0.444,0.197h0.012c0.163,0,0.317-0.062,0.435-0.176L37.28,21.032c0.008-0.006,0.076-0.068,0.117-0.108
        c0.034-0.032,0.062-0.065,0.068-0.081c1.962-2.032,3.043-4.702,3.043-7.517c0-5.974-4.86-10.834-10.835-10.834
        c-3.91,0-7.498,2.094-9.419,5.48c-1.92-3.387-5.508-5.48-9.419-5.48C4.86,2.492,0,7.352,0,13.326
        C-0.001,16.14,1.078,18.808,3.023,20.822z M10.834,3.743c3.875,0,7.346,2.312,8.842,5.891c0.098,0.233,0.324,0.383,0.577,0.383
        c0.252,0,0.479-0.15,0.577-0.384c1.497-3.578,4.968-5.89,8.843-5.89c5.285,0,9.585,4.3,9.585,9.584
        c0,2.521-0.978,4.904-2.754,6.712c-0.017,0.018-0.032,0.035-0.045,0.053L19.483,36.5l-15.4-16.358
        c-0.023-0.037-0.05-0.072-0.082-0.104c-1.775-1.805-2.752-4.188-2.752-6.711C1.249,8.042,5.549,3.743,10.834,3.743z"/>
</g>
</svg>

由于不知道如何使用 SVG 正常工作,我搜索了网络,查找了一些文章和 YouTube 视频,我现在正在学习的课程并没有以直观的方式告诉我太多或不多,但我终于把我的手放在两个有趣的机会上:

1] [在 Codepen 上找到的心脏动画] [2]

它的 pro:它已经制作好了,它的接近和诚实,在我自己的情况下不需要用于“脉冲”效果的几个 Js 代码,因此我将其删除。

它的缺点

我不知道如何有充分的心保持饱满。我知道一个动画,你必须插入这样的东西:

 animation:forwards;

但是在这里,在这种情况下,如果有人有解决方案,它似乎不起作用,我认为这将是他们要求我提供的项目的一个很好的选择;

它不使用“@ keyframes”,看起来像一个简单的过渡,但是,同样,我缺乏知识使得它很难解释;

如果从底部开始模拟“加载栏”,则“填充”动画会更好。但老实说,这更多是一种装饰元素,而不是真正的问题。

2] 发现的“充水效应”问题 [这里] [3]

链接的 Q / A 与应用于圆的注水动画有关。

它的 pro:这是一个很好的效果,另一个贡献者提出的附加动画也很棒!我比第一个选项更喜欢这种“自下而上”的填充效果。

它的 con:这不是一个合适的 con,是我无法使它适应我自己的需要。在本示例中,我无法将其应用于我的.svg 图像,而不是像他们对圈子所做的那样将其应用于“原生形式”。

我希望把帖子中描述的动画应用到我的心脏图标。好吧,不用说,没有适当的技能,我只是复制 / 粘贴了似乎有效的东西,令人惊讶的是,它有一些效果,但不是我正在寻找的,这是我目前的代码。

[编辑:我在这里使用“:悬停”而不是“:活动”,因为我找不到如何简单地点击一次心脏,以便它自动填充,“:活动”我必须多次点击它,就像在一个按钮粉碎的迷你游戏中填充它。]

HTML 第一:

<svg class='bigHeart' height="0" width="0">
                                <defs>
                                     <clipPath id=svgClip clipPathUnits="objectBoundingBox" transform="scale(0.01 0.01)">
                                         <path d='M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z'></path>   
                                     </clipPath>
                                </defs>
                            </svg>
                            <div class="heart-container">
                                <svg viewBox="0 0 100 100" class='heart-stroke'>
                                        <path class=bigHeart d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />    
                                </svg>
                                <input type='checkbox' class='heart-clip'>
                                <div class="fill">
                                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" xml:space="preserve">
                                        <path d="M0,6c100,10,100,-10,200,0c100,10,100,-10,200,0v394h-400Z" class="waveShape"></path>
                                    </svg>
                                </div>
                            </div>

然后是 CSS:

      .heart{
        width:40px;
        position:relative;
        
        overflow:hidden;
      }
      .heart:hover:before{
        content:'';
        position:absolute;
        background: #04ACFF;
        z-index: -1;
        width:100%;
        bottom:0;
        animation: wipe 5s forwards;
      }
      @keyframes wipe {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

如果我们参考 [我找到的原始代码] [3],我决定删除“背景:# 000”,并不得不添加一个“z-index:-1”,以便填充动画不重叠在图标的边框上。

我想感谢你,如果你已经这么远,感谢您阅读我今天的请求,并提前感谢您的任何建议和解决方案,你会很高兴与我分享,

3] 解决方案(感谢 @ thehujib)

解决方案由 @ thehujib 在提供,我只在这里再次发布他的代码,因为它清除了 W3 验证器发现的所有小元素(主要是 ID 的开放式和重复出现):

                        <svg class='bigHeart' height="0" width="0">
                                <defs>
                                     <clipPath id=svgClip clipPathUnits="objectBoundingBox" transform="scale(0.01 0.01)">
                                         <path d='M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z'></path>   
                                     </clipPath>
                                </defs>
                                <linearGradient id="my-cool-gradient" x2="1" y2="1">
                                    <stop offset="0%" stop-color="#FF79DA" />
                                    <stop offset="100%" stop-color="#9356DC" />
                                </linearGradient>
                            </svg>
                            <div class="heart-container">
                                <svg viewBox="0 0 100 100" class='heart-stroke'>
                                        <path class=bigHeart d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />    
                                </svg>
                                <input type='checkbox' class='heart-clip'>
                                <div class="fill">
                                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" xml:space="preserve">
                                        <path d="M0,6c100,10,100,-10,200,0c100,10,100,-10,200,0v394h-400Z" class="waveShape"></path>
                                    </svg>
                                </div>
                            </div>

和 CSS(唯一的变化是将一些重复的 ID 转换为 CLASSES:

:root {
  --stroke-width: 2px;
  --heart-width: 100%;
  --transition-length: 1.2s;
  --heart-color:#d32f2f;
}
.heart-container {
  position: relative;
  width:10%;
  aspect-ratio: 1/1;
  overflow: hidden;
  clip-path: url(#svgClip);
}
.heart-clip {
  appearance: none;
  margin: 0px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  overflow: hidden;
  z-index: 2;
 
}
.heart-clip + .fill {
  top:0;
  left:0;
  transform: translateY(50%);
  width: calc(2 * var(--heart-width, 100px));
  aspect-ratio: 1/1;
  transition: transform var(--transition-length, 0s) cubic-bezier(.2, .6, .8, .4);
}
 
.heart-clip:checked + .fill {
  transform: translateY(0);
}
.heart-stroke {
  width: calc(100% - (2 * var(--stroke-width, 2px)));
  aspect-ratio: 1/1;
  position: absolute;
  top: var(--stroke-width, 0);
  left: var(--stroke-width, 0);
  fill: transparent;
  stroke: var(--heart-color);
  stroke-width: var(--stroke-width, 1px);
}
.waveShape {
  animation-name: waveAction;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 1s;
  fill: var(--heart-color);
}
@keyframes waveAction {
  0% {
     transform: translate(-175px, 0px);
  }
  100% {
     transform: translate(0px, 0px);
  }
}
``
Regards,
Elrad.
  [1]: https://www.svgrepo.com/svg/5233/heart
  [2]: https://codepen.io/GeorgeWL/pen/yLeGw
  [3]: https://stackoverflow.com/questions/29738787/filling-water-animation/29739227#29739227
1

我认为解决方案是这样的:它仍然是一个简单的过渡,用于填充心脏和波浪效果的动画。

它使用自定义属性,你可以玩

:root {
   --stroke-width: 2px;
   --heart-width: 150px;
   --transition-length: 1.2s;
   --heart-color: #d32f2f;
}
.heart-container {
   position: relative;
   width: var(--heart-width, 100px);
   aspect-ratio: 1/1;
   overflow: hidden;
   clip-path: url(#svgClip);
}
.heart-clip {
   appearance: none;
   margin: 0px;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   position: absolute;
   overflow: hidden;
   z-index: 2;
}
.heart-clip + .fill {
   top:0;
   left:0;
   transform: translateY(50%);
   width: calc(2 * var(--heart-width, 100px));
   aspect-ratio: 1/1;
   transition: transform var(--transition-length, 0s) cubic-bezier(.2, .6, .8, .4);
}
  
.heart-clip:checked + .fill {
   transform: translateY(0);
}
.heart-stroke {
   width: calc(100% - (2 * var(--stroke-width, 2px)));
   aspect-ratio: 1/1;
   position: absolute;
   top: var(--stroke-width, 0);
   left: var(--stroke-width, 0);
   fill: transparent;;
   stroke: var(--heart-color);
   stroke-width: var(--stroke-width, 1px);
}
.waveShape {
   animation-name: waveAction;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   animation-duration: 1s;
   fill: var(--heart-color);
}
@keyframes waveAction {
   0% {
      transform: translate(-175px, 0px);
   }
   100% {
      transform: translate(0px, 0px);
   }
}
<svg height="0" width="0">
    <defs>
       <clipPath id=svgClip clipPathUnits="objectBoundingBox" transform="scale(0.01 0.01)">
         <path d='M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z'>     
       </clipPath>
    </defs>
</svg>
<div class="heart-container">
   <svg viewBox="0 0 100 100" class='heart-stroke'>
      <path d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />    
   </svg>
  
   <input type='checkbox' class='heart-clip'>
   <div class="fill">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 400" xml:space="preserve">
       <path d="M0,6c100,10,100,-10,200,0c100,10,100,-10,200,0v394h-400Z" class="waveShape"></path>
    </svg>
   </div>
</div>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(575)
地理服务器2.11作为Windows服务与 controlflow扩展
上一篇
PHP将数组中的项目与同一行中的另一个普通项目相加
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(83条)