首页
所有分类
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动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3弹性盒模型开发笔记（二）
Apr 26 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果（transform）
Nov 06 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 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
计算器(5) 图像处理(1) 底部导航(1) format(1) 异步回调(1) 对齐打印(1) PyTorch(1) 井字棋(1) 人工智能(2) 五子棋(12)
You might like
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
php实现购物车功能（下）
2016/01/05 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
意大利辅助药品、药物和补品在线销售：FarmaEurope
2020/04/29 全球购物
通信生自我鉴定
2014/01/18 职场文书
职工运动会邀请函
2014/02/02 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
合作意向书格式及范文
2014/03/31 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技