純CSS實作播放暫停按鈕變形動畫

直接上代碼，CSS：

.icon-play {
  width: 100px;
  height: 100px;
  fill: #089;
  cursor: pointer
}
.icon-play path {
  d: path('M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z');
  transition: d .2s linear .1s
}
.icon-play.play path {
  d: path('M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z')
}
           

HTML：

<!-- 沒錯隻需要這一行！ -->
<svg class="icon-play" viewBox="0 0 36 36"><path/></svg>
           

或者想加個背景圓

<svg class="icon-play" viewBox="0 0 36 36">
  <circle cx="18" cy="18" r="18" fill="#000"/>
  <path/>
</svg>
           

這樣隻需要通過JS控制

.icon-play

标簽添加或移除

.play

就可以啦

// js 添加移除 .play
var iconPlay = document.querySelector('.icon-play')
iconPlay.addEventListener('click', function () {
  if (iconPlay.classList.contains('play'))
    return iconPlay.classList.remove('play')
  iconPlay.classList.add('play')
})
           

有

jquery

的話直接：

// jquery 添加移除 .play
$('.icon-play').click(function () {
  $(this).toggleClass('play')
})
           

大功告成！！

如果你連JS都懶得寫，隻是要展示個純CSS+HTML的demo的話，那就利用

input

标簽的

:checked

屬性來控制

.icon-play {
    width: 100px;
    height: 100px;
    fill: #089;
    cursor: pointer
  }
  .icon-play path {
    d: path('M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z');
    transition: d .2s linear .1s
  }
  .toggle-play {
    display: none
  }
  .toggle-play:checked+.icon-play path {
    d: path('M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z')
  }
           

<label>
  <input type="checkbox" class="toggle-play">
  <svg class="icon-play" viewBox="0 0 36 36"><path/></svg>
</label>
           

效果圖