举例详解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 选择器 基本选择器介绍
Jan 21 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 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
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
python如何操作mysql
2020/08/17 Python
python 实现Harris角点检测算法
2020/12/11 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
总经理司机职责
2014/02/02 职场文书
逃课检讨书
2015/01/26 职场文书
司机岗位职责范本
2015/04/10 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python