话说 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. codeforces 985A Chess Placing

    题意: 移动最少的步数,使得所有的棋子在同一颜色的格子中. 每次一个棋子只能向左或者向右移动一步,不能移到有棋子的格子中. 思路: 枚举全黑和全白的情况. 对于每一个需要移动的棋子,它移动到的位置一定 ...

  2. Linux 系统查看对应公网映射地址

    最近在解决网络问题时,需要查看本机的出口公网IP信息,所以在网络上搜索和请求运维达人,获得如下两个方法: curl ifconfig.me 在linux系统中输入上述的命令,可以查看到本机连接的公网信 ...

  3. 关于oracle result_cache

    结果集缓存 和聚合物化视图类似,报表系统和数据仓库系统是最适合结果集缓存的,这些系统通常具有大量复杂的SQL,其中不少子查询包含聚合函数,如果能够尽可能重用这些已经计算过的聚合结果集,将极大的提升系统 ...

  4. 主从复制跳过错误(未采用GTID)

    DB:5.6.15 主从库没有采用GTID 案例1:从库对象不存在mysql> show slave status \G;*************************** 1. row * ...

  5. COCO数据集格式互换

    poly->compacted RLE:     seg=np.array([312.29, 562.89, 402.25, 511.49, 400.96, 425.38, 398.39, 37 ...

  6. linux 指令 备份

    lsb_release -a LSB是Linux Standard Base的缩写,lsb_release命令用来显示LSB和特定版本的相关信息.如果使用该命令时不带参数,则默认加上-v参数. -v, ...

  7. Validation failed for query for method

    问题原因 sql语法,使用@Query("select id, username, usersex, userphone from User where User.usersex = ?1& ...

  8. Pandas 基础(12) - Stack 和 Unstack

    这节的主题是 stack 和 unstack, 我目前还不知道专业领域是怎么翻译的, 我自己理解的意思就是"组成堆"和"解除堆". 其实, 也是对数据格式的一种 ...

  9. redis+spring 整合

    最近在研究redis也结合了许多网上的资料分享给大家,有些不足的还望大家多补充提点,下面直接进入主题. 结构图: 几个redis的核心jar,spring的一些jar自行导入 接下来开始配置项目: 1 ...

  10. [原]Universal Windows问题：winapifamily问题：WINAPI_PARTITION_DESKTOP问题：WINAPI_PARTITION_APP问题：WINAPI_FAMILY_PARTITION(WINAPI_PARTITION_DESKTOP)问题

    问题回顾: 我新建的生成dll的vs问题: 此vs项目包含需要GL.h 结果此文件声明的GLint找不到! 进去发现#if WINAPI_FAMILY_PARTITION(WINAPI_PARTITI ...