javascript - 請教:before 之 過渡效果 希望從中間擴張

问题描述

问 题

簡陋DEMO: https://codepen.io/chienweilu...

想請問 :hover 偽元素的時候, 是從左上角開始擴張

不知道有沒有辦法可以從中間擴滿整個圖片?

並且鼠標懸浮上會稍微變大像是按鈕, 不知道有沒有辦法用純sass刻出

---

原專案是使用icomoon, 概念大概是 滑鼠滑入專輯封面時, 出現黑底, 以及播放logo(從中間擴滿)

但目前只能從左上角開始動畫, 想請問各位大大有沒有類似的經驗?

順便請教如果要做這種效果還有沒有其他的辦法, 此專案是使用 vue+sass js除了vue之外想都使用原生

現在只有想到 js append一個新 Child 跟直接用css 處理(但無法hover icon 繼續動作)

第一個方法使用之後覺得hover (沒用jquery) 要重新封裝一個函式, 且專輯封面上已綁定了事件,

就想說直接用css處理這個效果了.

解决方案

1.将after定位在父元素的中间
2.css 动画不定义两个
(1)宽度渐长
(2)位置渐左
3.调试
ps 建议动画使用百分比单位

这篇关于javascript - 請教:before 之 過渡效果 希望從中間擴張的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！