首页
所有分类
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 相关文章推荐
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
纯html+css实现打字效果
Aug 02 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
分词器(1) mediapipe(1) for(1) re模块(2) okenizer(1) while(1) cvzone(1) 计算机视觉(2) SnakeGame(1) 无限迭代(1)
You might like
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
常用js脚本
2006/12/03 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
基于jQuery的弹出消息插件 DivAlert之旅（一）
2010/04/01 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
dtree 网页树状菜单及传递对象集合到js内，动态生成节点
2012/04/14 Javascript
JS实现div居中示例
2014/04/17 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Python面向对象编程基础实例分析
2020/01/17 Python
印尼旅游网站：via
2017/11/12 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
圣诞节红领巾广播稿
2014/02/03 职场文书
四下基层实施方案
2014/03/28 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
村干部四风问题整改措施
2014/09/30 职场文书