举例详解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关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 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
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
python解析基于xml格式的日志文件
2017/02/25 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python计算列表内各元素的个数实例
2018/06/29 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
用Python制作音乐海报
2021/01/26 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
校车安全管理责任书
2015/05/11 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server