话说 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. Linux基础命令---lp打印文件

    lp lp指令用来打印文件,也可以修改存在的打印任务.使用该指令可以指定打印的页码.副本等. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.openSUSE.SU ...

  2. UUID简介

    UUID简介如下:1.简介UUID含义是通用唯一识别码 (Universally Unique Identifier),这 是一个软件建构的标准,也是被开源软件基金会 (Open Software F ...

  3. Python3 批量替换文本内容

    Python3 批量替换文本内容 示例: # coding:utf8 import os; def reset(): i = 0 path = r"H:\asDemo\workdemo\aw ...

  4. RESTful API 设计指南-阮一峰

    作者: 阮一峰 日期: 2014年5月22日 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制 ...

  5. Python引用拷贝赋值

    先安利一个网站,对学习编程很有帮助:http://www.pythontutor.com/ 可以逐行可视化执行代码,具体自行体验啦 这个网站也是我在看别人的博文时候找到的,也先贴上别人的理解吧,我觉得 ...

  6. Python爬虫(四)——豆瓣数据模型训练与检测

    前文参考: Python爬虫(一)——豆瓣下图书信息 Python爬虫(二)——豆瓣图书决策树构建 Python爬虫(三)——对豆瓣图书各模块评论数与评分图形化分析 数据的构建 在这张表中我们可以发现 ...

  7. 2018.9.25 NOIP模拟赛

    *注意:这套题目应版权方要求,不得公示题面. 从这里开始 Problem A XOR Problem B GCD Problem C SEG 表示十分怀疑出题人水平,C题数据和标程都是错的.有原题,差 ...

  8. springboot日志配置

    默认情况下,spring boot使用的是LogBack日志系统.在spring-boot-starter-web和spring-boot-starter中都已经默认依赖了logging的工具包. 如 ...

  9. spring aop 中的JoinPoint

    AspectJ使用org.aspectj.lang.JoinPoint接口表示目标类连接点对象,如果是环绕增强时,使用org.aspectj.lang.ProceedingJoinPoint表示连接点 ...

  10. Steam饥荒

    存档回滚 D:\Program Files (x86)\Steam\userdata\***\219740\remote 巨人国是survival_数字,海难是shipwreck_数字,哈姆雷特是po ...