一.理解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. 修复使用sub和sup时的行间距问题

    sub和sup元素会轻微地增大行高. 幸好,用一点CSS就可以修复这个问题. 来自Nicolas Gallagher和Jonathan Neal的normalize.css(http://necola ...

  2. 身份证验证PHP类

    PHP根据身份证号,自动获取对应的星座函数,然后自动返回对应的星座,自动返回性别,判断是否成年 <?php class IdcardAction extends Action{ // PHP根据 ...

  3. Upgrade Windows Server 2016 to Windows Server 2019

    Pre-Upgrade Upgrade path: Windows Server 2016 can be upgraded to Windows 2019 in a single upgrade pr ...

  4. 阿里云ECS安装-openjdk8

    使用ssh工具登陆阿里云ecs控制台,然后,我们用yum 寻找下jdk的信息 阿里云ECS已经有安装包了,所以,我们不需要另行下载 或 手动上传jdk安装包. 执行下面命令,开始安装:yum inst ...

  5. Linux命令——lsblk

    参考:Linux lsblk Command Tutorial for Beginners (8 Examples) 简介 lsblk可以看成是“List block device”的缩写,即列为出所 ...

  6. MySQL/MariaDB数据库的复制过滤器

      MySQL/MariaDB数据库的复制过滤器 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.复制过滤器概述 1>.复制器过滤器功能 让从节点仅复制指定的数据库,或指 ...

  7. OpenStack核心组件-keystone

    1. Keystone介绍 keystone是OpenStack的组件之一,用于为OpenStack家族中的其它组件成员提供统一的认证服务,包括身份验证.令牌的发放和校验.服务列表.用户权限的定义等等 ...

  8. 【Miscalculation UVALive - 6833 】【模拟】

    题目分析 题目讲的是给你一个串,里面是加法.乘法混合运算(个人赛中误看成是加减乘除混合运算),有两种算法,一种是乘法优先运算,另一种是依次从左向右运算(不管它是否乘在前还是加在前). 个人赛中试着模拟 ...

  9. python使用 pdb 进行调试--- python -m pdb xxx.py 即可 和gdb使用一样

    使用 pdb 进行调试 pdb 是 python 自带的一个包,为 python 程序提供了一种交互的源代码调试功能,主要特性包括设置断点.单步调试.进入函数调试.查看当前代码.查看栈片段.动态改变变 ...

  10. 安卓Termux安装ssh及jupyter编程

    软件名称:Termux ssh安装 安装openssh apt update apt install openssh 启动ssh服务 sshd 配置公钥私钥 将电脑的公钥(id_rsa.pub)放入/ ...