一、过渡模块的连写
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大数据学习视频礼包
