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).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
随机推荐
- Netty返回数据丢包的问题之一
这个问题是在一个群友做压力测试的时候发现的.使用客户端和netty创建一条连接,然后写了一个for循环不停的给服务器发送1500条信息,发现返回只有几百条.另外几百条不知道哪去了.查看代码,发现在服务 ...
- K-wolf Number (数位DP)
题意:求区间内有多少个数满足条件:任意相邻的k个数位都不相等. 思路:老套路 #include<bits/stdc++.h> using namespace std; typedef lo ...
- 自制电脑usb红外遥控键盘
2010-08-08 19:20:00 看个ppt,还要一直按键盘或鼠标,能不能拿个遥控器控制一下. 动动脑,自己做一个吧. 电路分2部分,遥控器为发射部分,单片机为解码部分并且包含usb键盘功能. ...
- axios、ajax、fetch三者的区别
1.ajax:是指一种创建交互式网页应用的网页开发技术,并且可以做到无需重新加载整个网页的情况下,能够更新部分网页,也叫作局部更新 优缺点: 1)局部更新 2)原生支持,不需要任何插件 3)原生支持, ...
- 安装Joomla!3
在日常测试中搭建一个web 站点进行进行linux 相关功能测试,只是不喜欢httpd 或者nginx 的默认界面: 安装Joomla!3: 系统:centos 7 软件: 连接: https:// ...
- ubuntu16.04安装wordpress
ubuntu16.04安装wordpress和centos7安装wordpress存在一定的差异. 当然共性大于差异. 共性是lamp环境. wordpress的必备环境. 先共性再差异. 一.搭建l ...
- JavaScript(数组、Date、正则)
数组 创建数组 // 一.自变量创建数组 // 1-通过字面量创建一个空数组 var arr1 = []; console.log(arr1) console.log(typeof arr1); // ...
- 模块——Getopt::Long接收客户命令行参数和Smart::Comments输出获得的命令行参数内容
我们在linux常常用到一个程序需要加入参数,现在了解一下 perl 中的有关控制参数的模块 Getopt::Long ,比直接使用 @ARGV 的数组强大多了.我想大家知道在 Linux 中有的参 ...
- 05. .stop、.prevent、.capture、.self、.once、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- OceanBase 2.0让百万支付不是梦?
小蚂蚁说: 你们都很关心的 “OB双11大促实战分享” 专题来啦!本系列将为你系统性的介绍OceanBase支撑蚂蚁双11背后的技术原理和实战分享.从平台到架构,再到实现,一起来探索蚂蚁双11这场神秘 ...