首页
所有分类
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 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
Master(1) variables(1) PyAutoGUI(1) 主从复制(1) 继承(1) 封装(1) transaction(1) 百度地图(1) 构造函数(1) gRPC(3)
You might like
php仿discuz分页效果代码
2008/10/02 PHP
PHP中函数内引用全局变量的方法
2008/10/20 PHP
php内存缓存实现方法
2015/01/24 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
基于wxPython的GUI实现输入对话框（2）
2019/02/27 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
物业经理自我鉴定
2014/03/03 职场文书
开展读书活动总结
2014/06/30 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
合同和协议有什么区别？
2014/10/08 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
个人党性分析总结
2015/03/05 职场文书
护士自我推荐信范文
2015/03/24 职场文书
观后感开头
2015/06/19 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
如何Tomcat中使用ipv6地址
2022/05/06 Servers