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

时间 2020-02-08

标签 html 连载过分模块连写弹性效果栏目 HTML 繁體版

原文原文链接

1、过渡模块的连写html

1.过渡连写格式：git

过渡属性过渡时长运动速度延迟时间；github

2.过渡连写注意点：微信

（1）和分开写同样，若是想要多个属性添加过渡效果，也是使用逗号来隔开便可。学习

（2）连写的时候能够省略后面的两个参数，由于只要编写了前面的两个参数就已经知足了过渡的三要素。大数据

（3）若是多个属性运动的速度/延迟的时间/持续的时间都同样，那么能够简写为ui

 

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>

2、过渡模块-弹性效果spa

1.编写过的套路：.net

（1）不要管过渡，先编写基本界面；（2）修改咱们认为须要修改的属性；（3）再回过头来去给修改属性的那个元素添加过渡便可。code

 

<!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>

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