设为首页收藏本站
开启辅助访问 切换到宽版

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
搜索
返回列表 发新帖回复
查看: 210|回复: 16

[CSS] CSS3过渡transition效果实例介绍

[复制链接]
ttx9n

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2016-5-3 16:01:04 | 显示全部楼层 |阅读模式
这篇文章主要为大家详细介绍了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

相关帖子
回复

使用道具 举报

errol123

0

主题

2万

回帖

124

积分

注册会员

Rank: 2

积分
124
发表于 2022-9-26 03:04:38 | 显示全部楼层
好东西一定要看看！
回复 支持 反对

使用道具 举报

wangdj110

1

主题

1万

回帖

93

积分

注册会员

Rank: 2

积分
93
发表于 2022-11-9 23:35:09 | 显示全部楼层
额头额定法国队是范德萨
回复 支持 反对

使用道具 举报

3t0ukmu

27

主题

2万

回帖

331

积分

中级会员

Rank: 3Rank: 3

积分
331
发表于 2023-2-17 06:26:47 | 显示全部楼层
1312315458748777
回复 支持 反对

使用道具 举报

qq303604905

1

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-3-4 09:48:33 | 显示全部楼层
啊，数码撒飒飒飒飒
回复 支持 反对

使用道具 举报

bp5jgbcnt

2

主题

2万

回帖

221

积分

中级会员

Rank: 3Rank: 3

积分
221
发表于 2023-8-9 10:01:05 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

thywok

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-19 09:23:42 | 显示全部楼层
谢谢下载来看看
回复 支持 反对

使用道具 举报

平平安安

16

主题

2万

回帖

174

积分

注册会员

Rank: 2

积分
174
发表于 2023-11-9 08:10:31 | 显示全部楼层
dfdsafdsfdsfdsf
回复 支持 反对

使用道具 举报

leidie123a

1

主题

2万

回帖

59

积分

注册会员

Rank: 2

积分
59
发表于 2023-11-28 22:35:22 | 显示全部楼层
源码源码源码源码源码源码源码源码源码源码源码源码源码
回复 支持 反对

使用道具 举报

v3sfsi

5

主题

2万

回帖

183

积分

注册会员

Rank: 2

积分
183
发表于 2023-12-7 02:04:35 | 显示全部楼层
有什么好的服务器
回复 支持 反对

使用道具 举报

返回列表 发新帖 回复
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-23 03:24 , Processed in 0.211338 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表