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 : 规定完成过 ...
随机推荐
- 对于flex布局的使用心得
弹性盒子flex: 对于客户端的布局非常有用,不管是平均分配space-around这个属性还是两端对齐space-betwee在页面布局的时候都会有很好的表现. 对于部分内容区域中,具有很多大致内容 ...
- Java 之 Session 包含验证码登录案例
需求: 1. 访问带有验证码的登录页面login.jsp 2. 用户输入用户名,密码以及验证码. 如果用户名和密码输入有误,跳转登录页面,提示:用户名或密码错误 如果验证码输入有误,跳转登录页面, ...
- Java 之 Request 对象
一.Request 对象和 Response 对象原理 request和response对象是由服务器创建的,供我们使用的. request对象是来获取请求消息,response对象是来设置响应消息. ...
- github-git clone 下载很慢的问题解决
git clone下载很慢的问题: 下载到指定目录:git clone https://github.com/ChengWuOne/spring-cloud-demo.git D:/日常软件/GitH ...
- Ftp站点搭建的详细过程（包括指定用户登录）
最近接到要部署一个Ftp站点的一个任务,然后过程中有点小插曲踩了一些坑(指定用户登录,用户名和密码都是对的,输入了超级多遍,还是不行,登录不上,后面详细说明解决方案),特此记录一下.避免大家踩坑. 参 ...
- Kali Linux 2019.4发布了！解决Kali Linux 2019.4中文乱码问题
2019年11月26日,kali Linux官网发布了Kali Linux 2019.4发行版,此版本做了很大的改动,界面焕然一新. Kali Linux 2019.4涉及到的一些新更新内容包括: 新 ...
- MySQL/MariaDB数据库的mysqldump工具备份还原实战
MySQL/MariaDB数据库的mysqldump工具备份还原实战 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.mysqldump概述 1>.逻辑备份工具 mysq ...
- OpenStack核心组件-keystone
1. Keystone介绍 keystone是OpenStack的组件之一,用于为OpenStack家族中的其它组件成员提供统一的认证服务,包括身份验证.令牌的发放和校验.服务列表.用户权限的定义等等 ...
- CSS选择器知识梳理
<一>CSS选择器结构逻辑图 温馨提示:各位小伙伴,可以把逻辑图下载下来放大,看的比较清除,也可以给我留言,我分享原百度脑图给各位小伙伴. <二>接下来按照结构逻辑图具体讲解各 ...
- [转]sqlserver判断字符串是否是数字
sql2005有个函数ISNUMERIC(expression)函数:当expression为数字时,返回1,否则返回0.这只是一个菜鸟级的解决办法,大多数情况比较奏效. eg: 1 select I ...