HTML连载66-过度模块的连写、弹性效果
2021-04-18 19:28
标签：jpg 微信公众号 module size tin tle 修改 lan duration 一、过渡模块的连写 1.过渡连写格式： 过渡属性 过渡时长 运动速度 延迟时间； 2.过渡连写注意点： （1）和分开写一样，如果想要多个属性添加过渡效果，也是使用逗号来隔开即可。 （2）连写的时候可以省略后面的两个参数，因为只要编写了前面的两个参数就已经满足了过渡的三要素。 （3）如果多个属性运动的速度/延迟的时间/持续的时间都一样，那么可以简写为? 二、过渡模块-弹性效果 1.编写过的套路： （1）不要管过渡，先编写基本界面；（2）修改我们认为需要修改的属性；（3）再回过头来去给修改属性的那个元素添加过渡即可。 三、源码： 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-过度模块的连写、弹性效果 标签：jpg 微信公众号 module size tin tle 修改 lan duration 原文地址：https://www.cnblogs.com/ruigege0000/p/12275314.html
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;
}
.........省略代码........
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>D166_TransitionModuleElasticitytitle>
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>
文章标题：HTML连载66-过度模块的连写、弹性效果
文章链接：http://soscw.com/index.php/essay/76347.html