一、過渡模塊的連寫 1.過渡連寫格式： 過渡屬性 過渡時長 運動速度 延遲時間； 2.過渡連寫註意點： （1）和分開寫一樣，如果想要多個屬性添加過渡效果，也是使用逗號來隔開即可。 （2）連寫的時候可以省略後面的兩個參數，因為只要編寫了前面的兩個參數就已經滿足了過渡的三要素。 （3）如果多個屬性運動的 ...
一、過渡模塊的連寫
1.過渡連寫格式：
過渡屬性 過渡時長 運動速度 延遲時間；
2.過渡連寫註意點：
（1）和分開寫一樣，如果想要多個屬性添加過渡效果，也是使用逗號來隔開即可。
（2）連寫的時候可以省略後面的兩個參數，因為只要編寫了前面的兩個參數就已經滿足了過渡的三要素。
（3）如果多個屬性運動的速度/延遲的時間/持續的時間都一樣，那麼可以簡寫為
transition:all 0s <style> *{ margin:0; padding:0; } div{ width: 100px; height: 50px; /*transition-property: width;*/ /*transition-duration: 5s;*/ /*transition:width 1s linear 1s,background-color 2s linear 1s;*/ transition:all 5s; } div:hover{ width: 300px; } .........省略代碼........ <div></div>
二、過渡模塊-彈性效果
1.編寫過的套路：
（1）不要管過渡，先編寫基本界面；（2）修改我們認為需要修改的屬性；（3）再回過頭來去給修改屬性的那個元素添加過渡即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D166_TransitionModuleElasticity</title> <style> *{ margin:0; padding:0; } div{ height: 100px; margin-top: 100px; text-align: center; line-height: 100px; } div span{ font-size:80px; transition:all 2s; } div:hover span{ margin:0 20px; } </style> </head> <body> <div> <span>自</span> <span>古</span> <span>逢</span> <span>秋</span> <span>悲</span> <span>寂</span> <span>廖</span> </div> </body> </html>
三、源碼：
D165_TransitionModuleWritingContinuely.html
D166_TransitionModuleElasticity
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D165_TransitionModuleWritingContinuely.html
https://github.com/ruigege66/HTML_learning/blob/master/D166_TransitionModuleElasticitl
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
