话说 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. 双系统安装Ubuntu

    U盘制作教程参考Ubuntu官网 1.Ubuntu安装 1)分出空闲空间:首先,在现有计算机下划出一个专门给Ubuntu的磁盘分区,推荐Windows自带的磁盘管理工具.快捷键“win+X”-> ...

  2. python核心技术

    基本语法 Python的设计目标之一是让代码具备高度的可阅读性.它设计时尽量使用其它语言经常使用的标点符号和英文单字,让代码看起来整洁美观.它不像其他的静态语言如C.Pascal那样需要重复书写声明语 ...

  3. <转>jmeter（二十三）分布式测试

    本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...

  4. springmvc+hibernate在实体类中设置外键

    1.表User id主键,username,password,dept... 表Attendence id主键,uid外键,time... @ManyToOne @JoinColumn(name = ...

  5. Got error -1 when reading table

    环境:Percona Server for MySQL 5.5.18 模拟三个Terminal,实现当引用锁定表的查询被杀死时,错误日志中出现的Got error -1 when reading ta ...

  6. jQuery 筛选器2

    jQuery 筛选器2 // 由于$()只能输入字符串$('#li:eq(1)'),可通过.eq()来传入. // 获取this标签中的指定属性 $(this).eq(1) // 获取第一个元素 $( ...

  7. Docker 搭建私有仓库

    Docker 搭建私有仓库 环境: docker 版本 :18.09.1 主机地址:192.168.1.79 1.运行并创建私有仓库 docker run -d \ -v /opt/registry: ...

  8. rangeOfString 和 containsString 兼容iOS7处理

    //查找字符串是否包含"心" NSString *str = @"每天都有好心情"; if ([str containsString:@"心" ...

  9. Arch pacman 常用命令

    更新系统 pacman -Syu :对整个系统进行更新 如果你已经使用pacman -Sy将本地的包数据库与远程的仓库进行了同步,也可以只执行 pacman -Su 安装包 ➔ pacman -S 包 ...

  10. redis编译问题

    在编译redis时,出现以下问题 In file included from adlist.c:34:0: zmalloc.h:50:31: fatal error: jemalloc/jemallo ...