举例详解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 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 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缓存方法S()概述
2014/06/13 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python操作mysql数据库
2017/03/05 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
几道PHP的面试题
2012/05/19 面试题
const和static readonly区别
2013/05/20 面试题
大学毕业感言
2014/01/10 职场文书
大型车展策划方案
2014/02/01 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
干部个人对照检查材料
2014/08/25 职场文书
七一讲话心得体会
2014/09/05 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
客户经理岗位职责
2015/01/31 职场文书
物业保安辞职信
2015/05/12 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python