举例详解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——齿轮转动关键代码
May 02 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 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
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
关于svn冲突的解决方法
2013/06/21 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Python实现批量压缩图片
2018/01/25 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
opencv python图像梯度实例详解
2020/02/04 Python
Python双链表原理与实现方法详解
2020/02/22 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
老师给学生的表扬信
2014/01/17 职场文书
优秀食品类广告词
2014/03/19 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
节能环保演讲稿
2014/08/28 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2015年教师新年寄语
2014/12/08 职场文书
上诉状格式
2015/05/23 职场文书
建国大业电影观后感
2015/06/01 职场文书
教师个人教学反思
2016/02/23 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python