CSS微动画 - 不使用图片制作「加到最爱」开关按钮

Q: 请问icon要怎麽出图好呢？
A: 一定要用图片吗？

本篇要实作的是「加到最爱」的按钮，结合之前所述的伪元素，以不使用图片的方式做出图案，让按钮可以有更多变化。

同上一篇先做出个开关按钮（功能与上一篇相同）

<script>
  function toggle() {
    document.getElementById('container').classList.toggle('is-active')
  }
</script>

<style>
  .container {
    box-sizing: border-box;
    width: 70px;
    height: 40px;
    padding: 2px;
    border-radius: 20px;
    background-color: #eee;
    border: 2px solid #ccc;
  }
  .circle {
    position: relative;
    width: 32px;
    height: 32px;
    background-color: #aaa;
    border-radius: 50%;
    margin-left: 0;
    cursor: pointer;
  }
  .container,
  .circle  {
    transition: .3s;
  }
  .is-active.container {
    background-color: LavenderBlush;
    border-color: Crimson;
  }
  .is-active .circle {
    background-color: Crimson;
    margin-left: calc(100% - 32px);
  }
</style>

<div id="container" class="container">
  <div class="circle" onclick="toggle()"></div>
</div>

中间icon自己写

再来要使用伪元素::before及::after做出「＋」，以position: absolute将元素定位在.circle左方及上方各为50%的位置，然後以transform: translate(-50%, -50%)将元素回推自己的X及Y各一半，最後再给::before及::after宽高就可以罗，这时候不论宽高如何调整，都会在.circle的正中央。

<style>
  .circle::before,
  .circle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #eee;
    transform: translate(-50%, -50%);
    border-radius: 2px;
  }
  .circle::before {
    height: 60%;
    width: 5px;
  }
  .circle::after {
    width: 60%;
    height: 5px;
  }
</style>

爱心形状的icon也不是问题

将::before及::after都做成拱形的样子，并将两个重叠就会是爱心。先移除原本位移的transform，并让 top及 left 的位置修改为24%。最後对 .circle 进行旋转就可以让爱心变成正的了！

<style>
  .is-active .circle::before,
  .is-active .circle::after {
    transform: none;
    top: 24%;
    left: 24%;
  }
  .is-active .circle::before {
    width: 32%;
    border-radius: 0 0 20px 20px;
  }
  .is-active .circle::after {
    height: 32%;
    border-radius: 0 20px 20px 0;
  }
  .is-active .circle {
    transform: rotate(-135deg);
  }
</style>

爱心形状的icon也不是问题

再来为了icon也有渐变的效果，所以需要在::before及::after也都加上属性transition。

<style>
  .circle::before,
  .circle::after {
    transition: .3s;
  }
</style>

icon不一定要是图片

如果可以用css就做出icon取代图片，还可以让画面变化时有转场的效果，这样不美吗？

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！