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).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
随机推荐
- Network In Network学习笔记
Network In Network学习笔记 原文地址:http://blog.csdn.net/hjimce/article/details/50458190 作者:hjimce 一.相关理论 本篇 ...
- DataGridView 访问任意行不崩溃
int index= this.dataGridView1.rows.Add(); 先执行这行代码,然后访问任意行,不崩溃, 赋值不存在的行,只是不显示,或者无值. 什么原理呢? 一些其他 priva ...
- 深入浅出JAVA线程池使用原理1
前言: Java中的线程池是并发框架中运用最多的,几乎所有需要异步或并发执行任务的程序都可以使用线程池,线程池主要有三个好处: 1.降低资源消耗:可以重复使用已经创建的线程降低线程创建和销毁带来的消耗 ...
- mybatis源码解析12---ResultSetHandler解析
说完了StatementHandler和ParameterHandler,接下来就需要对查询的结果进行处理了,而对于sql结果的处理是由ResultSetHandler处理的,ResultHandle ...
- C++ Com控件调用
1.假如我们创建的Com组件的工程名叫TestCom,在其中添加了一个接口叫MyCom,接口名会自动命名为IMyCom,在其中添加两个方法,分别为: HRESULT Add([in] long n1, ...
- idea 报错 :error:java:Compilation failed:internal java compiler error
当使用Tomcat运行项目时报错 翻译一下是 错误:Java:编译失败:内部Java编译器错误 这样看来更不理解了 其实原因是Java的版本不一致 查看项目的jdk版本是否一致: file----pr ...
- 【题解】Luogu P3931 SAC E#1 - 一道难题 Tree
原题传送门 题目几乎告诉你要用最大流 先进行搜索,将树的叶子节点都连到一个虚拟点T上,流量为inf(这样不会干扰到前面部分的最大流) 其他边按树的形态连边,以根节点为S,跑一变最大流即可求出答案 #i ...
- 2018-2019-2 20189206 Python3学习
python3简明教程学习 基本概念 脚本文件: 脚本文件英文为Script.实际上脚本就是程序,一般都是由应用程序提供的编程语言.应用程序包括浏览器(javaScript.VBScript).多媒体 ...
- day04流程控制,if分支结构,while,for循环
复习 ''' 1.变量名命名规范 -- 1.只能由数字.字母 及 _ 组成 -- 2.不能以数字开头 -- 3.不能与系统关键字重名 -- 4._开头有特殊含义 -- 5.__开头__结尾的变量,魔法 ...
- Spring Boot 数据库连接池 Druid
简介 数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库连接池正是针对这个问 ...