话说 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. Godot必须明确掌握的概念与知识

    本文对godot必须掌握的概念进行罗列,以便于浏览学习: (随时补充) 1.场景 2.节点 X:场景与节点 3.脚本(建议直接学习GDscript,当然掌握C#也可以) 4.类

  2. CSS 步骤进度条

    ;;; } .wizard li {;; text-align: center; line-height: 30px; height: 30px; background-color: #C3C3C3; ...

  3. scrapy item pipeline

    item pipeline process_item(self, item, spider) #这个是所有pipeline都必须要有的方法在这个方法下再继续编辑具体怎么处理 另可以添加别的方法 ope ...

  4. 字典排序 sorted

    a = {6:2,8:0,1:4,-5:6,99:11,4:22} print( sorted(a.items()) ) #默认安照key排序的print( sorted(a.items(),key= ...

  5. pssh批量管理

    因为公司金融项目正式上线,有等保的要求,所有的线上服务器对操作过历史命令都要记录下来,需要修改一部分的配制文件.总共有300多台Linux服务器,总不能一台一台去改吧.首先想到是ansble,salt ...

  6. Flutter 获取控件尺寸和位置

    1. 插件必须渲染好, final RenderBox box = globalKey.currentContext.findRenderObject(); final size = box.size ...

  7. haproxy 初识

    官方网站:http://www.haproxy.org 描述 HAProxy的是一个免费的,非常快速和可靠的解决方案,提供 高可用性, 负载均衡和代理对TCP和基于HTTP的应用程序.它特别适用于流量 ...

  8. Python RabbitMQ RPC实现

    远程调用方法:R(remote)  P(procedure)  C(call) 为了说明如何使用RPC服务,我们将创建一个简单的客户端类. 它将公开一个名为call的方法,它发送一个RPC请求和块,直 ...

  9. MatLab数字图像处理实战（赵小川）-sift原理

  10. Ubuntu下 fatal error: Python.h: No such file or directory 解决方法

    参考: fatal error: Python.h: No such file or directory Ubuntu下 fatal error: Python.h: No such file or ...