举例详解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教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
css3应用示例:新增的选择器
Mar 16 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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
Zerg基本策略
2020/03/14 星际争霸
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
Python 爬虫图片简单实现
2017/06/01 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python小进度条显示代码
2019/03/05 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
简单了解python反射机制的一些知识
2019/07/13 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Python eval函数原理及用法解析
2020/11/14 Python
Django实现简单的分页功能
2021/02/22 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
公益活动邀请函
2014/02/05 职场文书
广告学专业求职信
2014/06/19 职场文书
多媒体教室标语
2014/06/26 职场文书
水利水电专业自荐信
2014/07/08 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
趣味运动会赞词
2015/07/22 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
十个Python自动化常用操作,即拿即用
2021/05/10 Python
python b站视频下载的五种版本
2021/05/27 Python
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL