生活随笔
收集整理的這篇文章主要介紹了
CSS 动效制作
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
動效制作：
- transform: scale(1.07)放大到 1.07 倍
- transition: all 0.5s 動畫效果
- 讓圖片放大不溢出的方法：在圖片外套一個(gè) div（注意以后圖片不要直接放上去，用一個(gè) div 把它框起來！）當(dāng) hover 到外 div 時(shí)，將圖片放大，對外面的 div 設(shè)置 overflow: hidden;
- 將播放按鈕居中的方法：將播放按鈕放在圖片外 div 里，div 的 position 屬性為 relative，播放按鈕的屬性為 absolute，calc(50% - 35px);就可以居中（35px 是播放按鈕圖片邊長的 1/2）
- hover 圖片的時(shí)候，播放按鈕的 opacity 從 0 變成 1.
總結(jié)
以上是生活随笔為你收集整理的CSS 动效制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
