一.理解transition属性

W3C标准中对CSS3的transition是这样描述的：

CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。简洁点说就是当元素从一种样式变换为另一种样式时为元素添加效果。

transition主要有***四个属性***，那这四个属性怎么记呢？变换的话总得有变换的属性名吧，知道是要哪个属性变，还得有变换的持续时间吧，持续时间里还得有变换速率吧，是先快后慢呢还是先慢后快呢；最后呢，一般动画都会有个延迟选项吧；所以就是**属性**，**时间**，**速率**，**延迟**

transition-property：/*规定设置过渡效果的 CSS 属性的名称。*/

transition-duration：/*规定完成过渡效果需要多少秒或毫秒。*/

transition-timing-function：/*规定速度效果的速度曲线。*/

transition-delay：/*定义过渡效果何时开始。*/

下面用几个实例来展示transition的具体用法。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>画一个过渡效果</title>

    </head>

    <style>

        .container {

            width: 100px;/* 设置为过渡前的宽度*/

            height: 100px;

            background: red;

            transition: width 2s;/* 规定过渡元素为宽度，变化时长为2秒*/

            transition-timing-function:linear;/*不设置该属性时默认速度效果的速度曲线为慢->快->慢，这里我将其设为匀速变化*/

            transition-delay: 1s;/* 规定在过渡效果开始之前需要等待的时间为1秒*/

        }

        .container:hover {

            width: 300px;/* 设置为过渡后的宽度*/

        }

    </style>

    <body>

        <div class="container">

        </div>

        <p>把鼠标指针移动到红色的 div 上，观看过渡效果。</p>

    </body>

</html>

效果如下：

我想，通过代码都能大概了解transition的基础用法了吧。

那么直接来分享一下手风琴的案例吧，由于比较简单，都是通过注释代码来讲解，就不叙述了

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>transition的手风琴案例</title>

        <style>

            * {

                margin: 0;/*格式化*/

                padding: 0;

            }

            .mulu {

                width: 250px;

                height: auto;

                margin: 30px auto;/*设置手风琴整体居于页面居中*/

            }

            .item h3{/*标题*/

                width: 100%;

                height: auto;

                text-align: center;/*设置文本居中*/

                background: #ff0000;

                border-bottom: 1px solid gray;/*设置下边框3个属性（1px，实线，灰色）*/

            }

            .item .item-box{/*内容*/

                width: 100%;

                height: 0;/*鼠标没有悬停时，高度为0*/

                overflow: hidden;/*鼠标没有悬停时，隐藏内容，*/

                transition: height 2s;/*设置高度的过渡变化为2秒*/

            }

            .item .item-box ul{/*内容列表*/

                list-style: none;/*去掉无序列表样式，即是字体前的小圆点*/

                background: #008795;

                padding: 10px;/*设置内边距为10px*/

            }

            .item:hover .item-box{/*鼠标悬停时变化*/

                height: 100px;/*鼠标悬停时高度变化为100px*/

            }

            ul li:active{/*鼠标点击时变化*/

                color: white;/*鼠标点击时，字体变白*/

            }

        </style>

    </head>

<!--先用盒模型来规范一下，设置4个div，分别输入不同的新闻栏目，以地址来命名，在不同的栏目中再设置列表，写上详细的新闻列表-->

    <body>

        <div class="mulu">

            <div class="items">

                <div class="item"><!--新闻栏目1-->

                    <h3>遂溪县</h3><!--地址标题-->

                    <div class="item-box">

                        <ul>

                            <li>遂溪的菜市场有个小书生。</li><!--新闻列表1-->

                            <li>遂溪的菜市场有个小书生。</li><!--新闻列表2-->

                            <li>遂溪的菜市场有个小书生。</li><!--新闻列表3-->

                            <li>遂溪的菜市场有个小书生。</li><!--新闻列表4-->

                        </ul>

                    </div>

                </div>

                <div class="item">

                    <h3>湛江市</h3>

                    <div class="item-box">

                        <ul>

                            <li>湛江的菜市场有个小书生。</li>

                            <li>湛江的菜市场有个小书生。</li>

                            <li>湛江的菜市场有个小书生。</li>

                            <li>湛江的菜市场有个小书生。</li>

                        </ul>

                    </div>

                </div>

                <div class="item">

                    <h3>广东省</h3>

                    <div class="item-box">

                        <ul>

                            <li>广东的菜市场有个小书生。</li>

                            <li>广东的菜市场有个小书生。</li>

                            <li>广东的菜市场有个小书生。</li>

                            <li>广东的菜市场有个小书生。</li>

                        </ul>

                    </div>

                </div>

                <div class="item">

                    <h3>大中国</h3>

                    <div class="item-box">

                        <ul>

                            <li>中国的菜市场有个小书生。</li>

                            <li>中国的菜市场有个小书生。</li>

                            <li>中国的菜市场有个小书生。</li>

                            <li>中国的菜市场有个小书生。</li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

效果如下：

鼠标悬停后

css3学习之--transition属性（过渡）的更多相关文章

  1. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  2. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

  3. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  4. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  5. CSS3学习之 transform 属性

    CSS3 transform是什么? transform的含义是:改变,使…变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...

  6. CSS3学习笔记之属性值

    font-family 设置文本的字体名称. font-style 设置文本样式. 取值 normal不使用斜体. italic使用斜体. oblique使用倾斜体. inherit从父元素继承. f ...

  7. css3动画（transition）属性探讨

    在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...

  8. css3中transition属性详解

    css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...

  9. css3——transition属性和opacity属性

    [transition-duration] 是一个css3属性,规定完成过度效果需要花费的时间(一秒或毫秒计).语法:transition-duration: time;time :    规定完成过 ...

随机推荐

  1. UML——从类图到C++

    简易软件开发流程 实践中,use case and description.class diagram与sequence diagram三者搭配,几乎是UML项目的基本类型,所以在分工或外包的设计文档 ...

  2. Linux命令——basename、dirname

    简介 这2个命令多用于shell脚本 用法 basename filename_will_full_path dirname filename_will_full_path 对于但后缀的情况,base ...

  3. c#在WinForm和WebForm中根据控件和属性名获取控件属性值

    在WinForm中开发的过程中,所有继承了Control控件,在使用多线程的时候,就需要通过一个通用的方法来设置界面上的控件的属性. delegate void DelegateSetControl( ...

  4. 记一次用pip安装docker-compose报错及解决方法

    Docker-Compose 的安装 方法一 # 下载1.25.0 docker compose sudo curl -L "https://github.com/docker/compos ...

  5. 我的ImageIO.write ByteArrayOutputStream为什么这么慢？

    File.createTempFile(prefix, suffix),创建一个临时文件,再使用完之后清理即可.但是遇到如下两个坑: String prefix = "temp"; ...

  6. go 学习 （一）：环境配置

    Go 下载地址:https://golang.google.cn/dl/ 右键我的电脑  --> 左上方 “高级系统设置”   ---> 环境变量  -->  第二个菜单栏 “系统变 ...

  7. Cramer-Rao Bounds (CRB)

    克拉美-罗界.又称Cramer-Rao lower bounds(CRLB),克拉美-罗下界. 克拉美罗界是对于参数估计问题提出的,为任何无偏估计量的方差确定了一个下限.无偏估计量的方差只能无限制的逼 ...

  8. LeetCode 1046. Last Stone Weight

    原题链接在这里:https://leetcode.com/problems/last-stone-weight/ 题目: We have a collection of rocks, each roc ...

  9. 002——keil-Error: L6915E: Library reports error: __use_no_semihosting was requested解决

    ..\OBJ\KEY.axf: Error: L6915E: Library reports error: __use_no_semihosting was requested, but _ttywr ...

  10. BZOJ 3451: Tyvj1953 Normal 点分治+FFT

    根据期望的线性性,我们算出每个点期望被计算次数,然后进行累加. 考虑点 $x$ 对点 $y$ 产生了贡献,那么说明 $(x,y)$ 之间的点中 $x$ 是第一个被删除的. 这个期望就是 $\frac{ ...