首页
所有分类
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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
css3中的calc函数浅析
Jul 10 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条
Apr 26 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 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
Spring Data JPA(4) Android(19) FutureTask(3) 线程池(1) ForkJoin(1) Springboot-cli(1) 池化技术(1) 主题(1) Repository接口(3) JAVA(88)
You might like
用Php实现链结人气统计
2006/10/09 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
json简单介绍
2008/06/10 Javascript
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
浅谈jQuery异步对象（XMLHttpRequest）
2014/11/17 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
[02:17]快乐加倍！DOTA2食人魔魔法师至宝＋迎霜节活动上线
2019/12/22 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python sys.argv用法实例
2015/05/28 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python如何为图片添加水印
2016/11/25 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
wxPython实现画图板
2020/08/27 Python
python如何基于redis实现ip代理池
2020/01/17 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python 实现一个计时器
2020/07/28 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
Javascript如何发送一个Ajax请求
2015/01/26 面试题
文化苦旅读书笔记
2015/06/29 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android