首页
所有分类
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教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
html5实现点击弹出图片功能
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
塑料(1) 酶(1) 界面设计(1) 人造肉(1) 粒子对撞机(1) 天问一号(1) 对撞机(1) 国际空间站(1) 太空(1) 夸克(1)
You might like
浅谈web上存漏洞及原理分析、防范方法（文件名检测漏洞）
2013/06/29 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
任意位置显示html菜单
2007/02/01 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
详解Vue依赖收集引发的问题
2019/04/22 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
BootstrapValidator验证用户名已存在（ajax）
2019/11/08 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python操作kafka实践的示例代码
2019/06/19 Python
python顺序执行多个py文件的方法
2019/06/29 Python
python模拟实现斗地主发牌
2020/01/07 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Python urllib.request对象案例解析
2020/05/11 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
诗狄娜化妆品官方网站：Stila Cosmetics
2016/12/21 全球购物
Becextech新西兰：数码单反相机和手机在线商店
2018/04/27 全球购物
New Balance澳大利亚官网：运动鞋和健身服装
2019/02/23 全球购物
美国购买体育赛事门票网站：TicketCity
2019/03/06 全球购物
澳大利亚领先的内衣店：Bendon Lingerie澳大利亚
2020/05/15 全球购物
经典商业广告词
2014/03/13 职场文书
五一促销活动总结
2014/07/01 职场文书
建筑节能汇报材料
2014/08/22 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
SpringBoot整合Minio文件存储
2022/04/03 Java/Android