css 动画 如何复制本体

Question

我现在的点赞效果是直接在原图形上动态添加class 做的, 但是我想做的时候保留原本的图形,
类似复制一个图形来做动画, 这个要怎么搞, 有人给点提示吗?

Answer 1

可以用 filter:drop-shadow() 来投射一个阴影，然后修改投射属性来达到你这个效果，
我就用 hover 模拟了一下点击，你大概看着，然后用 animation 改写实现就可以。

<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-thumbs-up-fill" viewBox="0 0 16 16">
    <path d="M6.956 1.745C7.021.81 7.908.087 8.864.325l.261.066c.463.116.874.456 1.012.965.22.816.533 2.511.062 4.51a9.84 9.84 0 0 1 .443-.051c.713-.065 1.669-.072 2.516.21.518.173.994.681 1.2 1.273.184.532.16 1.162-.234 1.733.058.119.103.242.138.363.077.27.113.567.113.856 0 .289-.036.586-.113.856-.039.135-.09.273-.16.404.169.387.107.819-.003 1.148a3.163 3.163 0 0 1-.488.901c.054.152.076.312.076.465 0 .305-.089.625-.253.912C13.1 15.522 12.437 16 11.5 16H8c-.605 0-1.07-.081-1.466-.218a4.82 4.82 0 0 1-.97-.484l-.048-.03c-.504-.307-.999-.609-2.068-.722C2.682 14.464 2 13.846 2 13V9c0-.85.685-1.432 1.357-1.615.849-.232 1.574-.787 2.132-1.41.56-.627.914-1.28 1.039-1.639.199-.575.356-1.539.428-2.59z"/>
  </svg>
</div>
<style lang='stylus'>
div
  margin 100px
  svg
    width 50px
    height @width
    color red
    filter drop-shadow(0 0 0 rgba(red,1))
    transition filter .6s ease-in
  &:hover svg
    filter drop-shadow(0 -30px 5px rgba(red,0))
</style>

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

没法复制本体，建议你写2个图形

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 3

document.documentElement.cloneNode(true)