话说 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 过渡模块的基本用法的更多相关文章

  1. CSS学习笔记05 display属性

    HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...

  2. Ext.Net学习笔记05：Ext.Net DirectEvents用法详解

    Ext.Net通过DirectEvents进行服务器端异步的事件处理.我们在 Ext.Net用法概览 这篇中已经简单的介绍了DirectEvents,今天我们将详细的介绍一下DirectEvents. ...

  3. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  4. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

  5. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  6. Python3学习笔记（urllib模块的使用）转http://www.cnblogs.com/Lands-ljk/p/5447127.html

    Python3学习笔记(urllib模块的使用)   1.基本方法 urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None,  ...

  7. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  8. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  9. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

随机推荐

  1. 【Checkio Exercise】Probably Dice

    题目: Probably Dice Battle is full of randomnesses. You should observe randomness in a controlled sett ...

  2. bzoj2880

    打公式好麻烦 QAQ 为了节省时间去复习,原谅我引用一下别人的博客...http://blog.csdn.net/acdreamers/article/details/8542292 #include ...

  3. QT使用MSVC编译器输出中文乱码问题解决方法

    方法一:使用QStringLiteral()宏对每个中文字符串封装,此方法的缺点是不能在使用tr()函数用于字符串翻译: 方法二:强制MSVC编译器采用UTF-8编码生成可执行文件,需要在出现中文字符 ...

  4. js 二维数组 for 循环重新赋值

    javascript 二维数组的重新 组装 var arr = [[1,2],[3,4],[5,6],[7,8]]; var temp = new Array(); for(var i= 0 ;i&l ...

  5. 2019/4/12 wen 常用类3

  6. oracle flashback data archive闪回数据归档天坑之XID重用导致闪回查询数据重复

    我们有个系统使用了Oracle flashback data archive闪回数据归档特性来作为基于时间点的恢复机制,在频繁插入.更新期间发现SYS_FBA_HIST_NNNN表中的XID被两个事务 ...

  7. URL和URI简单辨析

    URI 全称为 Universal Resource Identifier,统一资源标识符,用来唯一的标识一个资源. URL 全称为Universal Resource Locator,统一资源定位器 ...

  8. vi中换行、翻页和查找功能

    vi时,按ESC进入Command模式, 1. 移动光标命令:j 向下移动一行:k 向上移动一行:h 向左移动一个字符:l 向右移动一个字符:对于 j.k.l和h键,命令前加数字,移动多行:如 3j, ...

  9. C++ 将 std::string 转换为 char*

    参考: std::string to char* C++ 将 std::string 转换为 char* 目前没有直接进行转换的方法.必须通过string对象的c_str()方法,获取C-style的 ...

  10. 【Core】.NET Core 部署在Linux

    安装.NET  Core SDK 在CentOS上 1.右键打开命令行: 2.为了安装.NET,需要注册微软签名密钥和添加微软相关的支持.这个操作每台机器只能做一次. Add the dotnet p ...