首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3过渡transition效果实例介绍

Posted in HTML / CSS onMay 03, 2016

本文实例为大家分享了CSS3过渡transition效果，供大家参考，具体内容如下

效果图：

CSS3过渡transition效果实例介绍

实现代码：

transition.html

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>Transition</title>     
  6.     <style>     
  7.         #block {     
  8.             width: 400px;     
  9.             height: 300px;     
  10.             background-color: #69C;     
  11.             margin: 0 auto;     
  12.      
  13.             transition: background-color 1s, width 0.5s ease-out;     
  14.             -webkit-transition: background-color 1s, width 0.5s ease-out;     
  15.         }     
  16.         #block:hover {     
  17.             background-color: red;     
  18.             width: 600px;     
  19.         }     
  20.     </style>     
  21. </head>     
  22. <body>     
  23.     <div id="block">     
  24.      
  25.     </div>     
  26. </body>     
  27. </html>    

transitionDemo.html

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>TransitionDemo</title>     
  6.     <style>     
  7.         #wrapper {     
  8.             width: 1024px;     
  9.             margin: 0 auto;     
  10.         }     
  11.         .progress-bar-bg {     
  12.             width: 960px;     
  13.             /*background-color: aliceblue;*/     
  14.             background-color: lightyellow;     
  15.         }     
  16.         .progress-bar {     
  17.             height: 40px;     
  18.             width: 40px;     
  19.             background-color: #69C;     
  20.      
  21.             border: 1px solid lightyellow;     
  22.             border-radius: 5px;     
  23.         }     
  24.         .progress-bar:hover {     
  25.             width: 960px;     
  26.         }     
  27.      
  28.         #bar1 {     
  29.             -webkit-transition: width 5s linear;     
  30.             /*-webkit-transition: width 5s steps(6, end);*/     
  31.             /*-webkit-transition: width 5s step-start;*/     
  32.         }     
  33.         #bar2 {     
  34.             -webkit-transition: width 5s ease;     
  35.         }     
  36.         #bar3 {     
  37.             -webkit-transition: width 5s ease-in;     
  38.         }     
  39.         #bar4 {     
  40.             -webkit-transition: width 5s ease-out;     
  41.         }     
  42.         #bar5 {     
  43.             -webkit-transition: width 5s ease-in-out;     
  44.         }     
  45.     </style>     
  46. </head>     
  47. <body>     
  48. <div id="wrapper">     
  49.     <p>linear</p>     
  50.     <div class="progress-bar-bg">     
  51.         <div class="progress-bar" id="bar1"></div>     
  52.     </div>     
  53.      
  54.     <p>ease</p>     
  55.     <div class="progress-bar" id="bar2"></div>     
  56.      
  57.     <p>ease-in</p>     
  58.     <div class="progress-bar" id="bar3"></div>     
  59.      
  60.     <p>ease-out</p>     
  61.     <div class="progress-bar" id="bar4"></div>     
  62.      
  63.     <p>ease-in-out</p>     
  64.     <div class="progress-bar" id="bar5"></div>     
  65. </div>     
  66. </body>     
  67. </html>   

结果分析：鼠标移动上去后，会发生过渡动画。

以上就是本文的全部内容，希望对大家的学习有所帮助。

CSS3过渡transition效果实例介绍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
你应该知道的30个css选择器
Mar 19 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
HTML5中的autofocus（自动聚焦）属性介绍
Apr 23 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
HTML块级标签汇总（小篇）
Jul 13 HTML / CSS
HTML5 source标签：媒介元素定义媒介资源
Jan 29 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 #HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 #HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 #HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 #HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 #HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 #HTML / CSS
什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条
Apr 26 #HTML / CSS
自荐信(981) SOA面试题(9) 推荐信(292) 自我鉴定(671) 求职信(1029) 自我评价(886) Delphi面试题(13) Servlet面试题(20) Ruby面试题(15) J2EE面试题(19)
You might like
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
强制设为首页代码
2006/06/19 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
利用python求相邻数的方法示例
2017/08/18 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python中的asyncio代码详解
2019/06/10 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
python读取xml文件方法解析
2020/08/04 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
巴西最大的玩具连锁店：Ri Happy
2020/06/17 全球购物
水利公司纪检监察自我鉴定
2014/02/25 职场文书
招聘专员岗位职责
2014/03/07 职场文书
城管综合整治方案
2014/05/01 职场文书
财务部岗位职责范本
2015/04/14 职场文书
2016公务员年度考核评语
2015/12/01 职场文书