一、介绍

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果，经常和 :hover 一起 搭配使用。

二、语法

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

transition: property duration timing-function delay;

三、属性

1.property

想要变化的 css 属性，宽度、高度、背景颜色、内外边距都可以。

过渡不能将display:none;过渡到display:block;因为过渡属性只能值变，不能改变单词，如果想让隐藏的元素过渡到显示，可以将opacity: 0;过渡到opacity: 1; 。

如果想要所有的属性都变化过渡， 写一个all 就可以。

值 描述
none(默认) 没有属性会获得过渡效果
all 所有属性都将获得过渡效果
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

2.duration

默认值是 0，意味着和没加过渡一样瞬间变化。

time值单位是秒 (必须写单位） 比如 0.5s / .5s

值 描述
time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。

3.timing-function

定义过渡的运动曲线，默认是ease，可以省略

值 描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1）
ease(默认) 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

4.delay

用于定义运动何时开始，单位是秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）

值 描述
time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

四、案例

1.让一个透明的盒子放大位移加阴影。其中用:hover有小问题
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            position: absolute;

            top: 0;

            left: 0;

            width: 50px;

            height: 50px;

            opacity: 0;

            background-color: #f34;

            box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);

            /* transition:要过渡的属性 花费时间(单位s 秒) 运动曲线(默认ease 常用linear匀速) 何时开始(延迟 单位s，默认0)  */

            /* transtion不能使display:none过渡到display：block */

            /* 只能值变,不能变单词 */

            transition: all 1s;

        }

        /* 让盒子移动位置时使用hover会有小问题 */

        /* 当盒子左边线移动到鼠标上之后，盒子会默认鼠标已经不再盒子上了，会往回恢复原位 */

        /* 当盒子往回走时又经过了鼠标，即触发位移效果，盒子左边线再次经过移动到鼠标时，又会重复上面的操作，所以出现抖动。 */

        /* div:hover  */

        div:active {

            /* opactiy:可以让盒子和里面的内容变透明 */

            /* 取值0-1的小数，0是透明，1是完全显示 */

            opacity: 1;

            top: 100px;

            left: 100px;

            width: 150px;

            height: 150px;

            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .2);

        }

    </style>

</head>

<body>

    <div>小艾同学</div>

</body>

</html>

:hover时候出现的抖动问题：

2.仿小米logo移动效果
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>小米logo</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .logo {

            /* 溢出隐藏 */

            overflow: hidden;

            position: relative;

            width: 55px;

            height: 55px;

            background-color: #ff6700;

            margin: 100px auto;

        }

        .logo a {

            position: absolute;

            top: 0;

            left: -55px;

            /* a里面放两个盒子，所以宽度是logo的200% */

            width: 200%;

            height: 100%;

            /* 谁变化给谁加过渡 */

            transition: all .2s;

        }

        a::before,

        a::after {

            content: "";

            float: left;

            /* 小盒子应该和logo一样宽100%，单他的父亲a是200%，所以他是父亲a的一半 */

            width: 50%;

            height: 100%;

            background: url(images/mi-home.png) center;

        }

        a::after {

            background: url(images/mi-logo.png) center;

        }

        .logo:hover a {

            /* 鼠标经过时a，右移动小盒子的宽度 */

            left: 0px;

        }

    </style>

</head>

<body>

    <div class="logo">

        <a href="#"></a>

    </div>

</body>

</html>

3.当鼠标经过时给盒子加阴影，有立体感，并在底部弹出一个隐藏的盒子
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .dad {

            width: 1200px;

            margin: 100px auto;

        }

        li {

            list-style: none;

        }

        li {

            /* 溢出隐藏，让隐藏的盒子看不见 */

            overflow: hidden;

            position: relative;

            float: left;

            width: 230px;

            height: 300px;

            background-color: #aaa;

            margin: 20px;

            transition: all .5s;

        }

        .dad li::after {

            content: "隐藏的盒子";

            position: absolute;

            bottom: -80px;

            left: 0;

            width: 100%;

            height: 80px;

            background-color: #f34;

            /* 让谁过渡就给谁加 */

            transition: all 1s;

        }

        .dad li:hover {

            /* 让li向上走走，更有立体感 */

            margin-top: 10px;

            /* 给li加阴影 */

            box-shadow: 0 10px 30px rgba(0, 0, 0, .3);

        }

        .dad li:hover::after {

            /* 鼠标经过li时，li::after向上移动80 */

            bottom: 0;

        }

    </style>

</head>

<body>

    <div class="dad">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

    </div>

</body>

</html>

4.商品下拉列表
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .dropdown {

            /* 隐藏溢出的文字不能给父盒子加，因为dd相对于父盒子永远溢出，鼠标经过时 也不会显示 */

            /* overflow: hidden; */

            width: 150px;

            height: 45px;

        }

        .dt {

            width: 100%;

            height: 100%;

            line-height: 45px;

            text-align: center;

            background-color: #f34;

        }

        .dd {

            /* dd高度为0时文字溢出隐藏 */

            overflow: hidden;

            width: 100%;

            /* height: 300px; */

            /* 先让高度为0 */

            height: 0;

            background-color: pink;

            transition: all .3s;

        }

        /* 鼠标经过dropdown时候，让dd下拉 */

        .dropdown:hover .dd {

            height: 300px;

        }

    </style>

</head>

<body>

    <div class="dropdown">

        <div class="dt">商品分类</div>

        <div class="dd">

            <ul>

                <li>商品1</li>

                <li>商品2</li>

                <li>商品3</li>

                <li>商品4</li>

                <li>商品5</li>

                <li>商品6</li>

                <li>商品7</li>

                <li>商品8</li>

            </ul>

        </div>

    </div>

</body>

</html>

分享完毕，不妥之处，敬请批评指正，谢谢大家！

01-css3之过渡的更多相关文章

  1. CSS3的过渡和转换

    CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...

  2. css3的过渡、动画、2D、3D效果

    浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...

  3. CSS3(2)--- 过渡(transition)

    CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...

  4. 牛逼的css3:动态过渡与图形变换

    写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...

  5. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

  6. CSS笔记（十三）CSS3之过渡

    参考:http://www.w3school.com.cn/css3/css3_transition.asp 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元 ...

  7. CSS3 transition过渡

    transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...

  8. css3 转换 过渡 及动画

    转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...

  9. CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  10. CSS3 Transition 过渡

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动 ...

随机推荐

  1. 【Deep Learning读书笔记】深度学习中的概率论

    本文首发自公众号:RAIS,期待你的关注. 前言 本系列文章为 <Deep Learning> 读书笔记,可以参看原书一起阅读,效果更佳. 概率论 机器学习中,往往需要大量处理不确定量,或 ...

  2. Linux 基础篇

    本文使用系统为 :CentOS 7 1.文件操作 增: touch a.txt   #增加文件 mkdir test  # 增加目录   参数:-p 创建多级目录   ; 删: rm a.txt  # ...

  3. 洛谷1378 油滴扩展 dfs进行回溯搜索

    题目链接:https://www.luogu.com.cn/problem/P1378 题目中给出矩形的长宽和一些点,可以在每个点放油滴,油滴会扩展,直到触碰到矩形的周边或者其他油滴的边缘,求出剩余面 ...

  4. 图-连通分量-DFS-并查集-695. 岛屿的最大面积

    2020-03-15 16:41:45 问题描述: 给定一个包含了一些 0 和 1的非空二维数组 grid , 一个 岛屿 是由四个方向 (水平或垂直) 的 1 (代表土地) 构成的组合.你可以假设二 ...

  5. H3C路由器地址池租期时间H3CMSR830-6BHI-WiNet

    H3C路由器地址池租期时间H3CMSR830-6BHI-WiNet 设备H3CMSR830-6BHI-WiNet 先输入dis dhcp server tree pool 查看地址池名称,然后 < ...

  6. UNIX环境高级编程——TCP/IP网络编程 常用网络信息检索函数

    UNIX环境高级编程——TCP/IP网络编程   常用网络信息检索函数 gethostname()   getppername()   getsockname()   gethostbyname() ...

  7. RabbitMQ 交换机类型

    1,扇形交换机 fanout 2, 直连交换机 direct 3, 通配符交换机 topic

  8. Thread Future模式

    多线程不管是extends Thread 还是 implements Runnable 都是要重写run 方法来实现,这两种方式子线程都没有返回值. 如果要实现主线程对子线程的监听,让子线程有返回值, ...

  9. Prism 源码解读5-数据绑定和命令

    介绍 WPF本身就支持通知.绑定和命令,实现ViewModel和VIew之间的通讯,但相对来说功能比较少,Prism扩充了这些功能并提供更加强有力,简洁的数据绑定和命令. 0 绑定通知 WPF的绑定通 ...

  10. 本地不安装Oracle时，PLSQL的配置

    这篇我在csdn上写过的,文章地址:https://blog.csdn.net/weixin_40404606/article/details/101940542