CSS过渡属性transitions详细解读——Web前端系列学习笔记
生活随笔
收集整理的這篇文章主要介紹了
CSS过渡属性transitions详细解读——Web前端系列学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- transition
- teansition-property 屬性名稱
- transtion-duration 花費時間
- transition –timing -function 時間曲線
- transition-delay 等待時間
- 樣例代碼
- 效果圖
transition
transition是一個復合屬性，由4個屬性構成，如下表所示。
teansition-property 屬性名稱
transtion-duration 花費時間
transition –timing -function 時間曲線
transition-delay 等待時間
樣例代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS3 過渡</title><style>/*方環*/.border-radius{width: 40px;height: 40px;border: 70px solid #ff6e9b;/*變化過程：3s， 下面編寫變化過程*/transition: 0.5s;}/*圓環*/.border-radius:hover{width: 40px;height: 40px;/*border: 70px solid #ff6e9b;*/border: 70px solid;border-color: #ff898e #93baff #c89386 #ffb151;border-radius: 80px/90px;}</style></head> <body> <div class="border-radius"></div> </body> </html>效果圖
總結
以上是生活随笔為你收集整理的CSS过渡属性transitions详细解读——Web前端系列学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 操作系统 先来先服务算法（FCFS）、最
- 下一篇： 保姆级解读！CSS属性transform