動效制作：

• opacity: 0.2 模糊設置

• transform: scale(1.07)放大到 1.07 倍

• transition: all 0.5s 動畫效果

• 讓圖片放大不溢出的方法：在圖片外套一個 div（注意以后圖片不要直接放上去，用一個 div 把它框起來！）當 hover 到外 div 時，將圖片放大，對外面的 div 設置 overflow: hidden;

• 將播放按鈕居中的方法：將播放按鈕放在圖片外 div 里，div 的 position 屬性為 relative，播放按鈕的屬性為 absolute，calc(50% - 35px);就可以居中（35px 是播放按鈕圖片邊長的 1/2）

• hover 圖片的時候，播放按鈕的 opacity 從 0 變成 1.

總結

以上是生活随笔為你收集整理的CSS 动效制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。