css3学习之--transition属性（过渡）
一.理解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属性（过渡）的更多相关文章
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
- CSS3中的Transition属性详解
w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
- CSS3中的Transition属性详解(贝赛尔曲线)
transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...
- CSS3学习之 transform 属性
CSS3 transform是什么? transform的含义是:改变,使…变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
- CSS3学习笔记之属性值
font-family 设置文本的字体名称. font-style 设置文本样式. 取值 normal不使用斜体. italic使用斜体. oblique使用倾斜体. inherit从父元素继承. f ...
- css3动画（transition）属性探讨
在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...
- css3中transition属性详解
css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...
- css3——transition属性和opacity属性
[transition-duration] 是一个css3属性,规定完成过度效果需要花费的时间(一秒或毫秒计).语法:transition-duration: time;time : 规定完成过 ...
随机推荐
- Java 之 框架概述
一.什么是框架 框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架.前者是从应用方面而后者是从目的方面 ...
- 创建Spring boot project报错：Project build error: Non-resolvable parent POM for xxx:0.0.1-SNAPSHOT: Could not transfer artifact org.springframework.boot:spring-boot-starter-parent
刚开始创建Spring boot项目时,pom.xml文件时报如下图错误: 在网上百度的说让更新下Maven的update project,我试了没用,最后将version版本改了就行了,我原来版本是 ...
- Hybris产品主数据的价格折扣维护
登录Hybris backoffice的产品管理界面,进入price标签页,点击Create new Discount Row按钮: 在Discount下拉地段里选择10%的折扣,这个产品原来的单价是 ...
- java系统化基础-day01-基础语法知识
1.学前必看 该课程将系统化的讲解java基础,但是该课程并不适合零基础的学员,因为在整个java学习体系中我们是按照实际生产设计, 主体思路是以完成某个业务为主线,用到什么技术就学什么技术,即带着问 ...
- day 03 预科
目录 什么是变量: 变量的组成 变量的风格 1.驼峰体 2.下划线 变量名的组成规范 注释的作用 turtle库的简单使用 什么是变量: 1.是变化的量. 2.变:现实世界中的状态是会发生改变的. 3 ...
- Linux chown命令详解使用格式和方法
指令名称 : chown 使用权限 : root(一般来说,这个指令只有是由系统管理者(root)所使用,一般使用者没有权限可以改变别人的文件拥有者,也没有权限可以自己的文件拥有者改设为别人.只有系统 ...
- Linux实验：hdfs shell基本命令操作（一）
[实验目的] 1)熟练hdfs shell命令操作 2)理解hdfs shell和linux shell命令 [实验原理] 安装好hadoop环境之后,可以执行hdfs shell命令对hdfs 的空 ...
- 介于JAVAswing和Socket写的聊天室
在厦门的第一阶段给我们复习了JAVASE基础,第一阶段的小玩具叫我们自选题材,我自己选了聊天室这个内容,这个小玩具无论是线程,还是网络编程,都会涉及到,比较有综合性,所以我选了这个: 这是我的包体结构 ...
- @Scope("prototype")
spring中bean的scope属性,有如下5种类型: singleton 表示在spring容器中的单例,通过spring容器获得该bean时总是返回唯一的实例prototype表示每次获得bea ...
- oracle 年龄分档，不用case when 的方法
一般我们出分档数据都是case when ,但是如果是对年龄等一些字段进行细分,比如五岁一档,我们如果用case when就会特别麻烦,写的特别多,这里我介绍一种简单的方法,对细分的字段进行处理: 建 ...