当前位置:首页 > Web开发 > 正文

后台回复礼包获取Java大数据学习视频礼包 HTML连载66-过度模块的连写、弹性效果

2024-03-31 Web开发

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大数据学习视频礼包

技术图片

HTML连载66-过度模块的连写、弹性效果

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/30344.html