首页
所有分类
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实现文字向右循环闪过效果实例（可用于移动端）
Jun 15 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 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
YB-230(1) 74HC4066(1) 原神(1) AGC(1) AN-LP1(1) FS1016(1) ICF-903L(1) BCLer(1) YAESU(1) frg-100(1)
You might like
深入了解PHP类Class的概念
2012/06/14 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
Javascript的一种模块模式
2008/03/22 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
2015/12/01 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
python开发之for循环操作实例详解
2015/11/12 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
英国No.1文具和办公用品在线：Euroffice
2016/09/21 全球购物
化学教师自荐信范文
2013/12/28 职场文书
市场部规章制度
2014/01/24 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
话题作文之财富（600字）
2019/12/03 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技