首页
所有分类
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的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
利用CSS的Sass预处理器（框架）来制作居中效果
Mar 10 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 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
metaclass(1) zip(1) 数据类型(8) 触发器(3) IOC(3) 自动化(1) XML(1) Geospatial(1) Hash(1) Bean(3)
You might like
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
PHP 编写的 25个游戏脚本
2009/05/11 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
经验几则 推荐
2006/09/05 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
[00:12]DAC2018 Miracle-站上中单舞台，他能否再写奇迹？
2018/04/06 DOTA
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
python3获取url文件大小示例代码
2019/09/18 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
汤米巴哈马官方网站：Tommy Bahama
2017/05/13 全球购物
Bench加拿大官方网站：英国城市服装品牌
2017/11/03 全球购物
Kaufmann Mercantile官网：家居装饰、配件、户外及更多
2018/09/28 全球购物
Penhaligon’s英国官网：成立于1870年的英国香水制造商
2021/02/18 全球购物
请写出 float x 与＂零值＂比较的 if 语句
2016/01/04 面试题
Delphi笔试题
2016/11/14 面试题
办公室打字员岗位职责
2014/04/16 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
高中团支书竞选稿
2015/11/21 职场文书
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript