举例详解CSS3中的Transition


Posted in HTML / CSS onJuly 15, 2015

1.会伸缩的搜索表单

常在 sf.gg 混的人都知道,它的顶部导航栏是这样的:
举例详解CSS3中的Transition

当输入框获得焦点就会变成这样的:
举例详解CSS3中的Transition

利用 CSS3 的 Transition 属性,我们可以简单做出一个类似的搜索表单出来:

HTML 标记:

XML/HTML Code复制内容到剪贴板
  1. <header>  
  2.     <form action="#" method="post" class="searchForm">  
  3.         <label for="search">search</label>  
  4.         <input type="search" id="search" name="search" placeholder="search">  
  5.     </form>  
  6. </header>  

CSS 样式:

CSS Code复制内容到剪贴板
  1. *{   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  5. header{   
  6.     font-familyhelvetica,arial,sans-serif;   
  7.     displayblock;   
  8.     overflowhidden;   
  9.     width:500px;           
  10.     margin15px;   
  11.     border-radius: 3px;   
  12.     background-color#ddd;   
  13. }   
  14. form.searchForm{   
  15.     /*包含label和input的容器*/  
  16.     width200px;   
  17.     margin5px;   
  18.     padding5px;   
  19. }   
  20. form.searchForm input{   
  21.     width90px;   
  22.     padding2px 0 3px 5px;   
  23.     outlinenone;   
  24.     font-size: 1.2em;   
  25.     border-color#eee #ccc #ccc #eee;   
  26.     border-radius: 10px;   
  27.     /*针对webkit内核的浏览器的厂商前缀*/  
  28.     -webkit-transition:0.5s width;   
  29. }   
  30. form.searchForm input:focus{   
  31.     width400px;   /*如果失去焦点,则缩回原来长度*/  
  32. }   
  33. form.searchForm label{   
  34.     displaynone;  /*标注是必要的,但不用显示出来*/  
  35. }  

效果图:

默认:
举例详解CSS3中的Transition

获得焦点:
举例详解CSS3中的Transition

    对于那些可以输入的控件,大家又俗称其为 字段。每个表单控件(submit 按钮除外),都有一个对应的 label 文本元素,用于描述控件代表的数据。所以,一个搜索框就是 一个字段的表单。

2.CSS3过渡

示例:

CSS Code复制内容到剪贴板
  1. -webkit-transition:0.5s width;  

    注意:transition 属性需要使用带厂商前缀的形式——这里示例只带有Webkit(Chrome / Safari)前缀的属性。

CSS3 过渡可以让 CSS 属性产生动画效果。平常被某些事件触发时变化很突然的样式,比如鼠标悬停时改变链接颜色,使用过渡后会在指定的时间段内逐渐变化。第一条 CSS 规则设定属性的初始状态和过渡参数。第二条 CSS 规则设定事件发生时属性的目标状态。

通常,过渡动画是由用户鼠标悬停时的 :hover 伪类规则和表单元素获得焦点时的 :focus 伪类规则触发的。除此之外,还可以在一个带类名选择符的规则中设定新状态,然后通过 JavaScript(或其他 JS 类库)为元素添加这个类名来触发过渡,添加类名的时机可以是鼠标点击或其它事件发生时。

有五个过渡属性:

    transition-property,过渡的 CSS 属性名,比如 color、 width;
    transition-duration,过渡的持续时间,以秒或毫秒设定,比如 2s、 500ms;
    transition-timing-function,过渡的调速函数,决定动画效果是否平滑,是先慢后快还
    是先快后慢,比如 ease-in、 ease-out、 ease-in-out 或 linear(默认值);
    transition-delay,过渡开始前的延迟时间,以秒或毫秒设定,比如 1s、 200ms;
    transition,过渡的简写属性,例如 transition:color 2s ease-in 1ms; 。

    注意::很多(并非全部)CSS 属性都可以通过 transition 属性来实现动画效果。

HTML / CSS 相关文章推荐
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 #HTML / CSS
初探CSS3中的calc()功能
Jul 14 #HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 #HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 #HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 #HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 #HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 #HTML / CSS
You might like
将数组写入txt文件 var_export
2009/04/21 PHP
PHP 变量的定义方法
2010/01/26 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
Python字符编码判断方法分析
2016/07/01 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
详解Python3中ceil()函数用法
2019/02/19 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
Python 求向量的余弦值操作
2021/03/04 Python
巾帼文明岗申报材料
2014/05/01 职场文书
移交协议书
2014/08/19 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
python运算符之与用户交互
2022/04/13 Python