首页
所有分类
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 相关文章推荐
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
html5 桌面提醒：Notifycations应用介绍
Nov 27 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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
virtualenv(1) ip2region(1) DeOldify(1) 注解(1) dataBinding(1) scrapy(1) Postman(1) localStorage(1) BottomSheetDialog(1) 反射(1)
You might like
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
用PHP生成html分页列表的代码
2007/03/18 PHP
php创建多级目录代码
2008/06/05 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
[02:22:36]《加油！DOTA》总决赛
2014/09/19 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python文件操作整理汇总
2014/10/21 Python
Python multiprocessing.Manager介绍和实例（进程间共享数据）
2014/11/21 Python
Python数据结构与算法之列表（链表，linked list）简单实现
2017/10/30 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
Desigual英国官网：在线购买原创服装
2018/03/09 全球购物
全球最大的户外用品零售商之一：The House
2018/06/12 全球购物
Lookfantastic西班牙官网：英国知名美妆购物网站
2018/06/13 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
运动会通讯稿100字
2015/07/20 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis