一、介绍

过渡（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. 基于Docker搭建Nginx图片服务器

    前言 一般开发中,都会把图片上传到一个目录,然后将目录和文件名拼接存储在数据库中,但是,这种方法如果没弄好的话可能有一定的缺陷. 若项目搬迁,即时这台服务器本身还在用,存放在服务器的跟项目相关的图片也 ...

  2. [CVPR 2019]NOCS代码训练、检测与评估

    Normalized Object Coordinate Space for Category-Level 6D Object Pose and Size Estimation 训练.检测与评估 本文 ...

  3. C语言学生管理系统

    想练习一下链表,所以就有了这个用C写的学生管理系统 没有把它写入文件,才不是因为我懒哈哈哈,主要是为了练习链表的 #include<stdio.h> #include<stdlib. ...

  4. 加油站问题 Gas Station

    2019-06-01 17:09:30 问题描述: 问题求解: 其实本题本质上是一个数学题. [定理] 对于一个循环数组,如果这个数组整体和 SUM >= 0,那么必然可以在数组中找到这么一个元 ...

  5. 痞子衡嵌入式：记录i.MXRT1060驱动LCD屏显示横向渐变色有亮点问题解决全过程（提问篇）

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT1060上LCD横向渐变色显示出亮点问题的分析解决经验. 痞子衡前段时间在支持一个i.MXRT1060客户项目时遇到了LCD ...

  6. 阅读了这三篇文章，你也就基本理解了ASP.NET Core MVC框架的工作原理

    <200行代码,7个对象--让你了解ASP.NET Core框架的本质>让很多读者对ASP.NET Core管道有深刻的理解,知道了ASP.NET Core框架针对每个请求的处理流程.在过 ...

  7. PHP7内核（四）：生命周期之开始前的躁动

    上一章我们对PHP的源码目录结构有了初步了解,本章我们继续从生命周期的维度对PHP进行剖析. 一.概览 生命周期是什么呢?你可以把它看作执行过程,PHP的生命周期也就是它从开始执行到结束执行的过程. ...

  8. 一个基于深度学习回环检测模块的简单双目 SLAM 系统

    转载请注明出处,谢谢 原创作者:Mingrui 原创链接:https://www.cnblogs.com/MingruiYu/p/12634631.html 写在前面 最近在搞本科毕设,关于基于深度学 ...

  9. Python执行js之PyexecJs

    利用Python执行js 爬虫中会经常碰到JS加密,当我们找到他加密的JS代码之后我们需要获取它的返回值,python虽然可以模仿js写一个python版本的加密,但是这样有点费时间,也有点费头发~ ...

  10. D - 渣渣仰慕的爱丽丝 HDU - 6249（背包问题变形)

    爱丽丝喜欢集邮.她现在在邮局买一些新邮票. 世界上有各种各样的邮票;它们的编号是1到N.但是,邮票不是单独出售的;必须成套购买.有M套不同的邮票可供选择; 第i套包括编号从li到ri的邮票 .同一枚邮 ...