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

2020-02-08 16:00:28来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

一、过渡模块的连写

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

 

 


原文链接:https://www.cnblogs.com/ruigege0000/p/12275314.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:1.Android网络编程-HTML介绍

下一篇:转载整理:SublimeText3 Emmet失效问题以及win7 pyV8安装问题