CSS学习笔记-05 过渡模块的基本用法
话说 1对情侣两情相悦，你情我愿。时机成熟，夜深人静。、。咳 ，如果就这么直奔主题，是不是有点猴急，所以，还是要来点前戏@。 铛 铛， 这个时候 过渡模块出现了。
划重点：
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: ;
padding: ;
}
div{
width: 100px;
height: 50px;
background-color: red;
/* 告诉浏览器哪个属性需要执行过渡效果 */
transition-property: width background-color;
/* 过渡效果持续的时长 */
transition-duration: 5s,5s; }
/* hover 这个伪类选择器出了可以用在a 标签上，还可以用在其他任何标签上 */
div:hover{
width: 500px;
background-color: blue;
} /* 过渡三要素
1. 必须要有属性变化。
2. 必须告诉系统哪个属性需要执行过渡效果。
3. 必须告诉系统过渡效果持续时长。 注意点：
当多个属性需要同时执行过渡效果时，用逗号隔开即可。
transition-property: width background-color;
transition-duration: 5s,5s;
*/
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS学习笔记-05 过渡模块的基本用法的更多相关文章
- CSS学习笔记05 display属性
HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...
- Ext.Net学习笔记05：Ext.Net DirectEvents用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.我们在 Ext.Net用法概览 这篇中已经简单的介绍了DirectEvents,今天我们将详细的介绍一下DirectEvents. ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- Python3学习笔记（urllib模块的使用）转http://www.cnblogs.com/Lands-ljk/p/5447127.html
Python3学习笔记(urllib模块的使用) 1.基本方法 urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None, ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
随机推荐
- OpenStack-Neutron-安全组
neutron中目前安全组的实现是使用iptables来实现的 创建安全组 创建安全组的时候默认有两条“出”规则(ipv4和ipv6) “default”安全组不仅有“出”规则,还有“入”规则.默认有 ...
- ReportViewe调用Reporting Services报表时报错Session超时
序列化问题加上[Serializable]即可 /// <summary> /// 报表身份授权重写 /// </summary> [Serializable] public ...
- 必须添加对程序集"System.Core"的引用
在项目下的web.config中添加 <compilation debug="true" targetFramework="4.0"> <as ...
- vue store存储commit和dispatch
vue store存储commit和dispatch this.$store.commit('toShowLoginDialog', true);this.$store.dispatch('toSho ...
- C++反射实现（转）
参考了wxWidgets的相关代码,并进行简化,同时借鉴了网上的相关内容,改进之处在于,只需要继承基本类Object,在类的头文件中定义宏,DECLARE_CLASS(类名),在类的实现文件中定义宏, ...
- C#调用endtask
原文最早发表于百度空间2009-03-23 写这个小工具主要是因为自动化测试那边反馈了一个问题和endtask有关,结果写完之后发现这个问题从程序外部测试不了……c#调endtask主要也是用DllI ...
- Python xml模块
xml模块 自己创建xml文档 import xml.etree.cElementTree as ET new_xml = ET.Element("personinfolist") ...
- 继上篇后的Excel批量数据导入
上篇Excel动态生成模板,此篇将借用此模板进行Excel数据的批量导入. 说明:由于数据库中部分数据储存的是编码或者Id,因此,这里就需要用到上篇中的全局数据,判断是否有数据,有数据直接使用,没有数 ...
- python scrapy baidu image【转】
原 https://github.com/vivianLL/baidupictures #!/usr/bin/env Python # coding=utf-8 #__author__ = 'leil ...
- hadoop MR的一些文件归属（包括临时文件存储情况）
https://blog.csdn.net/bxyz1203/article/details/8057810