一、过渡模块的连写

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

HTML连载66-过度模块的连写、弹性效果的更多相关文章

  1. CSS学习笔记-过度模块-编写过渡效果

    过渡模块-编写过渡效果: 1.编写过渡套路:    1.1不要管过渡,先编写基本界面    1.2修改我们认为需要修改的属性    1.3再给被修改属性的元素添加过渡即可 2.弹性效果    < ...

  2. css3写下雨效果

    css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...

  3. caffe+opencv3.3dnn模块 完成手写数字图片识别

    最近由于项目需要用到caffe,学习了下caffe的用法,在使用过程中也是遇到了些问题,通过上网搜索和问老师的方法解决了,在此记录下过程,方便以后查看,也希望能为和我一样的新手们提供帮助. 顺带附上老 ...

  4. a标签伪类选择器+过度模块

    a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的. 2.格式: 1):link 修改从未被访问过状态下的样式. 2):visited 修改被访问 ...

  5. HTML连载65-过渡模块的基本使用

    一.过渡模块的基本使用 1.*:hover;这个伪类选择器除了可以用在a标签上,还可以用在其他任何标签上. 2.过渡三要素: (1)必须要有属性发生变化:(2)必须告诉系统哪个属性需要执行过渡效果:( ...

  6. ansible的logging模块用来写日志

    [root@node-1 library]# cat dolog.py #!/bin/env python ANSIBLE_METADATA = { 'metadata_version': 'alph ...

  7. javascript 模块引擎 (手写草稿)

    1.试题: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. PC版模块滚动不显示滚动条效果

    以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现. 此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现. HT ...

  9. canvas画布实现手写签名效果

    最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: <!--手写区--> <div class="mSign_signMa ...

随机推荐

  1. jmeter使用—正则表达式提取器

    当我们测试接口的时候,有些请求参数是需要从上个接口返回获取的数据,这样的话我们就需要用到关联了.今天我们使用的关联是正则表达式提取器来进行获取需要关联的数据. 下面来具体说明正则表达式提取器的使用方法 ...

  2. HanLP《自然语言处理入门》笔记--3.二元语法与中文分词

    笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 3. 二元语法与中文分词 上一章中我们实现了块儿不准的词典分词,词典分词无法消歧. ...

  3. 缓存 ehcache

    只是用于自己记录,防止日后忘记,回看所用 第一步:配置ehcahe 缓存 <?xml version="1.0" encoding="UTF-8"?> ...

  4. Java错误：找不到类文件或者未加载主类

    使用java命令执行.class文件时,java只会查找环境变量CLASSPATH中的目录,并会不查找当前目录,所以只要把当前目录”."加入到CLASSPATH中就可以了.

  5. Vertx使用EventBus发送接受自定义对象

    先看官方文档步骤: 需要一个编解码器,看源码: 可见内置了需要数据类型的实现,所以发送其他消息可以发送,但是如果发送自定义对象就需要自己实现编解码逻辑了 一 自定义编解码器 /** * 自定义对象编解 ...

  6. 重磅！K8S 1.18版本将内置支持SideCar容器。

    作者:justmine 头条号:大数据与云原生 微信公众号:大数据与云原生 创作不易,在满足创作共用版权协议的基础上可以转载,但请以超链接形式注明出处. 为了方便阅读,微信公众号已按分类排版,后续的文 ...

  7. SASS用法入门

    本文参考了 阮一峰 老师对 SASS 用法的讲解. 学过 CSS 的人都知道,它不是一种编程语言,在日常的开发中,经常要写大量的 css 代码,有很多的重复代码,效率很低.Sass 是一个 CSS 的 ...

  8. Java面试技巧—如何自我介绍

    在企业面试环节中“自我介绍”这个老生常谈的话题就不用多说什么了,面试官必定会问的.那么如何在自我介绍的时候就能够打动面试官,吸引面试官对面试者的兴趣?如何进行自我介绍比较好?有没有什么方式方法呢?当然 ...

  9. Java数据类型及对应取值范围

    Java数据类型及对应取值范围 在Java中,数据类型分为两大种:基本数据类型(值类型)和包装类型(引用数据类型).基本数据类型不是对象,不能调用toString().hashCode().getCl ...

  10. 90万条数据玩转RFM用户分析模型

    RFM,是一种经典的用户分类.价值分析模型: R,Rencency,即每个客户有多少天没回购了,可以理解为最近一次购买到现在隔了多少天. F,Frequency,是每个客户购买了多少次. M,Mone ...