# Transition:添加弹出过渡效果
# Transition:添加弹出过渡效果
通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
第一,在默认样式中声明元素的初始状态样式;
第二,声明过渡元素中点值样式,比如悬浮状态;
第三,在默认样式中通过添加过渡函数,添加一些不同的样式。
- transition:为一个元素在不同状态之间切换的时候定义不同的过渡效果。
- transition: property | duration | timing function | delay ;
- property:过渡效果的 CSS 属性的名称。
- duration:完成过渡效果需要多少秒或毫秒。
- transition-timing-function:规定速度效果的速度曲线。
- delay:过渡效果何时开始。[规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。]
- 默认值:all 0 ease 0
- 属性语法值及解释:
- transition-property: none | all | property;
- [property name1,name2,name3...][[具有过渡效果属性](https://www.cnblogs.com/images/cnblogs_com/deepblue775737449/1000018/o_图像 1.jpg)]
- transition-duration: time;[规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值是 0,意味着不会有效果]
- transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n); 详解 - transition-delay: time;
- transition-property: none | all | property;
transition-timing-function: linear /* the same speed */
: ease /* slow-fast-slow */
: ease-in /* slow start*/
: ease-out /* slow end */
: ease-in-out /*slow start-slow end*/
: cubic-bezier(n,n,n,n); /*define your own values in a cubic-bezier function*/
▲ 单个属性:
{
width:100px; /*初始状态*/
background:blue; /*需要设置背景色或border,否则效果不可见。*/
transition-property: width;
transition-duration: 2s;/*效果过渡时间不可缺省,否则虽然可触发,但无过渡效果。*/
}
div:hover{width:300px;} /*目标值及触发*/
/*也可集合使用,如下*/
transition: width 2s;
▲ 多个属性:
div
{
width:100px;
height:100px;
background-color:red;
border:3px solid yellow;
transition:background-color 2s,border 2s,width 2s,height 2s;border:10px dotted black; /*多属性建议使用 {transition:all 2s} */
}
div:hover
{
width:300px;
height:300px;
background-color:green;
border:10px dotted black;
}
- transition可以写在
起始css
中,也可以写在中点css
中。- transition写在
起始css
中,效果覆盖起始
→中点
/中点
→终止
的整个周期。 - transition写在
中点css
中,效果只覆盖中点
→终止
。
- transition写在
- transition写在哪个标签,就表示过渡效果向谁进行,例如:
<div></div>
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
/*由div:hover中值状态返回div初始状态,width有2S的过渡;其他属性无过渡效果*/
div:hover {
width: 300px;
background-color: green;
transition: background-color 2s;
}
/*由div初始状态——div:hover中值状态,过渡效果有width、background-color;其他属性无过渡效果*/
除非对返回过渡有特殊要求,否则一般将transition写在
起始css
中。
# Transition:添加弹出过渡效果的更多相关文章
- JSP中添加弹出框
JSP中添加弹出框 %> <script language="javascript" type="text/javascript"> aler ...
- 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...
- JS来添加弹出层,并且完成锁屏
上图 <html> <head> <title>弹出层</title> <style type="text/css"> ...
- iOS添加弹出菜单
最近接触的项目需要实现一个弹出窗,类似于点击微信navigation bar右上角的bar button所展现的弹出窗,最终效果如下: Demo代码存放在https://github.com/LuoD ...
- openlayers添加弹出框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap-Plugin:弹出框(Popover)插件
ylbtech-Bootstrap-Plugin:弹出框(Popover)插件 1.返回顶部 1. Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- JavaScript插件——弹出框
(JavaScript插件——弹出框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.htm ...
- 弹出框,先弹出遮罩有透明度灰色100%高宽,置顶z-index:999---再弹出框最顶部z-index:9999
<div class="mask"></div> <div class="maskbox"> <form id=&qu ...
随机推荐
- 获取指定类型如枚举/属性上自定义attribue值
有时候我们用数字来区分一些类型,如1:中国银行,2:建设银行,3:工商银行,…….这时候我在代码中通常会定义枚举来与定义的一一对应,并在该枚举值上设置特性来表示所代表的含义,这样避免多处写一些数字来标 ...
- GCD基础知识
并行和并发 在英文世界里,「并行」和「并发」的区别比较清晰,「并行」对应parallelism,「并发」对应concurrency:但在中文世界里二者仅一字之差,两个概念非常容易弄混淆: 各种资料对「 ...
- 搜索好题UVA1601
题目 分析:如果以当前3个小写字母的位置为状态,则问题转化为图上的最短路问题.但是如果每次都判断小写字母的下一步是否合法,那就是说每次移动都需要判断5^3,肯定会超时.可以把所有可以移动的格子找出来建 ...
- [ZJOI 2008] 骑士
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1040 [算法] 首先 , 题目中互相讨厌的关系构成了一棵基环森林 用拓扑排序找出环 ...
- JavaScript-Tool:wdtree
ylbtech-JavaScript-Tool:wdtree 1.返回顶部 1. 插件描述:wdTree是一个轻量级jQuery插件用于创建一个带有嵌套Check Boxe的树形控件. wdTree是 ...
- ASP.NET Core:WebAppCoreAngular
ylbtech-ASP.NET Core:WebAppCoreAngular 1.返回顶部 1. 2. 3. 4. 5. 6. 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 ...
- C++ 动态多维数组的申请与释放
今天在实验室的项目中遇到了一个问题,直接上代码: void ViBe::init(Mat img) { imgcol = img.cols; imgrow = img.rows; // 动态分配三维数 ...
- 用ffmpeg命令将264裸码流封装成mp4(转载)
转自:http://bbs.csdn.net/topics/370256130 ffmpeg -f h264 -i source.264 -vcodec copy out.mp4
- ecb-2.40与cedet-1.1的兼容(转载)
转自:http://blog.csdn.net/cnsword/article/details/7474119 今天凑热闹把fedora升级到了17,emacs升级到了24,但是悲剧了,显示cedet ...
- .net 下webservice 的WebMethod的属性
WebMethod有6个属性: .Description .EnableSession .MessageName .TransactionOption .CacheDuration .BufferRe ...