一.理解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. Android Scroller详解

    在学习使用Scroller之前,需要明白scrollTo().scrollBy()方法. 一.View的scrollTo().scrollBy() scrollTo.scrollBy方法是View中的 ...

  2. 深入理解jvm--分代回收算法通俗理解

    1.通俗的理解java对象的这一辈子 我是一个普通的java对象,我出生在Eden区,在Eden区我还看到和我长的很像的小兄弟,我们在Eden区中玩了挺长时间.有一天Eden区中的人实在是太多了,我就 ...

  3. Swagger Liunx环境搭建（亲测百分百可用）

    一.安装nodejs 下载编译好的nodejs安装包,下载地址: https://nodejs.org/dist/v10.10.0/ (作者下载的10.10.0,可根据自己需要下载不同版本) 将下载好 ...

  4. nodejs 将不同文件夹中的视频整合到一个文件夹中

    var fs = require("fs") var path = require("path") var listRealPath = path.resolv ...

  5. Django-视图函数view

    目录 1.Django的视图函数view 1.1一个简单的视图 2.CBV和FBV 3.使用Mixin(了解) 4.给视图加装饰器 4.1使用装饰器装饰FBV 4.2使用装饰器装饰CBV 5.requ ...

  6. Kotlin协程作用域与Job详解

    Job详解: 在上一次https://www.cnblogs.com/webor2006/p/11725866.html中抛出了一个问题: 所以咱们将delay去掉,需要改造一下,先把主线程的dela ...

  7. WPF 控件库——带有惯性的ScrollViewer*（转）

    转:https://blog.csdn.net/ahilll/article/details/82418892 一.先看看效果 二.原理 虽然效果很简单,但是网上的一些资料涉及的代码量非常可观,而且效 ...

  8. 《逆袭团队》第九次团队作业【Beta】Scrum meeting 3

    项目 内容 软件工程 任课教师博客主页链接 作业链接地址 团队作业9:Beta冲刺与团队项目验收 团队名称 逆袭团队 具体目标 (1)掌握软件黑盒测试技术:(2)学会编制软件项目总结PPT.项目验收报 ...

  9. KM模板 最大权匹配（广搜版） Luogu P1559 运动员最佳匹配问题

    KM板题: #include <bits/stdc++.h> using namespace std; inline void read(int &num) { char ch; ...

  10. 【NOIP2017】逛公园 D1 T3

    记忆化搜索 跑一次反向的最短路求出MinDis(u,n)MinDis(u,n)MinDis(u,n) f[u][k]f[u][k]f[u][k]表示dis(u,n)<=MinDis(u,n)+d ...