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大数据学习视频礼包
HTML连载66-过度模块的连写、弹性效果的更多相关文章
- CSS学习笔记-过度模块-编写过渡效果
过渡模块-编写过渡效果: 1.编写过渡套路: 1.1不要管过渡,先编写基本界面 1.2修改我们认为需要修改的属性 1.3再给被修改属性的元素添加过渡即可 2.弹性效果 < ...
- css3写下雨效果
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...
- caffe+opencv3.3dnn模块 完成手写数字图片识别
最近由于项目需要用到caffe,学习了下caffe的用法,在使用过程中也是遇到了些问题,通过上网搜索和问老师的方法解决了,在此记录下过程,方便以后查看,也希望能为和我一样的新手们提供帮助. 顺带附上老 ...
- a标签伪类选择器+过度模块
a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的. 2.格式: 1):link 修改从未被访问过状态下的样式. 2):visited 修改被访问 ...
- HTML连载65-过渡模块的基本使用
一.过渡模块的基本使用 1.*:hover;这个伪类选择器除了可以用在a标签上,还可以用在其他任何标签上. 2.过渡三要素: (1)必须要有属性发生变化:(2)必须告诉系统哪个属性需要执行过渡效果:( ...
- ansible的logging模块用来写日志
[root@node-1 library]# cat dolog.py #!/bin/env python ANSIBLE_METADATA = { 'metadata_version': 'alph ...
- javascript 模块引擎 (手写草稿)
1.试题: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- PC版模块滚动不显示滚动条效果
以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现. 此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现. HT ...
- canvas画布实现手写签名效果
最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: <!--手写区--> <div class="mSign_signMa ...
随机推荐
- Bootstrap自带的那些常用插件
1.Bootstrap自带的那些常用插件. 1.1模态框 模态框的HTML代码放置的位置 务必将模态框的HTML代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组 ...
- AOP编程实践总结
AOP编程实践总结 AOP概述 AOP(Aspect-Oriented Programming,面向方面编程)是OOP(Object-Oriented Programing,面向对象编程)的补充和完善 ...
- Docker扩展内容之容器环境变量
介绍 docker容器设置环境变量除了可以在容器层面的变量文件中加载也可以在容器运行之初进行预加载环境变量,下面介绍在Dockerfile中编写环境变量的方式 ENV TZ=Asia/Shanghai ...
- 自定义HttpMessageConverter实现RestTemplate的exchange方法返回自定义格式数据
一 概述 实现如下效果代码,且可正常获取到返回数据: ResponseEntity<JsonObject> resEntity = restTemplate .exchange(url, ...
- 基于spring cloud OAuth2的微服务授权验证服务搭建的一些坑, 包括401,client_secret,invalid_scope等问题
一 先贴成功图,用的是springcloud Finchley.SR1版本,springboot版本2.0.6 问题一: 返回401, Unauthorized 出现这个问题原因很多:首先确保方法开启 ...
- 一步一步安装配置Ceph分布式存储集群
Ceph可以说是当今最流行的分布式存储系统了,本文记录一下安装和配置Ceph的详细步骤. 提前配置工作 从第一个集群节点开始的,然后逐渐加入其它的节点.对于Ceph,我们加入的第一个节点应该是Moni ...
- 2020年大厂Java面试题（基础+框架+系统架构+分布式+实战）
前言 作为一个Java开发者,Java架构师应该是大家的一个职业目标了吧. 要成为Java架构师,首先你要是一个高级Java工程师,熟练使用各种框架,并知道它们实现的原理.jvm虚拟机原理.调优,懂得 ...
- Ecplise-SVN插件异常: 由于目标计算机积极拒绝，无法连接。
在Ecplise中,选择team->share project时,出现以下异常 由于目标计算机积极拒绝,无法连接. svn: Unable to connect to a repository ...
- Shell case语法结构解析
case ... esac 与其他语言中的 switch ... case 语句类似,是一种多分枝选择结构,每个 case 分支用右圆括号开始,用两个分号 ;; 表示 break,即执行结束,跳出整个 ...
- 三、Linux系统中的文件类型和文件扩展名
.sock文件也是一类特殊的文件,这类文件通常用在网络之间进行数据连接,如:我们可以启动一个程序来监听客户端的要求,客户端可以通过套接字来进行通信: linux中的文件类型 文件类型介绍 Linux系 ...