首页
所有分类
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 相关文章推荐
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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
tcp/ip(1) 递归(1) tokenizer(1) 限流(2) 数据库卡死(1) 内置模块(1) IP(1) Parser(1) 限速(1) update(2)
You might like
php下保存远程图片到本地的办法
2010/08/08 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
深入理解JavaScript系列（14） 作用域链介绍(Scope Chain)
2012/04/12 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Python字典简介以及用法详解
2016/11/15 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
PyCharm无法识别PyQt5的2种解决方法，ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
如何对python的字典进行排序
2020/06/19 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
伦敦一家非常流行的时尚精品店：Oxygen Boutique
2017/01/15 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
大一自我鉴定范文
2013/12/27 职场文书
优秀交警事迹材料
2014/01/26 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
2014年平安夜寄语
2014/12/08 职场文书
丽江古城导游词
2015/02/03 职场文书
活动总结模板大全
2015/05/11 职场文书
2016年十一促销广告语
2016/01/28 职场文书