首页
所有分类
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 box-sizing属性
Apr 17 HTML / CSS
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 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
BCLer(1) frg-100(1) AN-LP1(1) YB-230(1) 74HC4066(1) DE1103(2) 239军机(1) 根德5570(1) ICF-903L(1) YAESU(1)
You might like
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php DES加密算法实例分析
2019/09/18 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
jQuery remove()过滤被删除的元素（推荐）
2017/07/18 jQuery
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python isinstance函数介绍
2015/04/14 Python
python实现自动更换ip的方法
2015/05/05 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Currentbody美国/加拿大：美容仪专家
2020/03/09 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
JS数组去重详情
2021/11/07 Javascript