您现在的位置是：网站首页>列表内容

CSS3过渡transition效果实例介绍详解css3 Transition属性（平滑过渡菜单栏案例）CSS3中的元素过渡属性transition示例详解CSS3使用transition属性实现过渡效果

2023-10-08 13:53:12 273人已围观

简介 这篇文章主要为大家详细介绍了CSS3过渡transition效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了CSS3过渡transition效果，供大家参考，具体内容如下

效果图：

实现代码：

transition.html

XML/HTML Code复制内容到剪贴板
  1. >     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>Transitiontitle>     
  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. >     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>TransitionDemotitle>     
  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>linearp>     
  50.     <div class="progress-bar-bg">     
  51.         <div class="progress-bar" id="bar1">div>     
  52.     div>     
  53.      
  54.     <p>easep>     
  55.     <div class="progress-bar" id="bar2">div>     
  56.      
  57.     <p>ease-inp>     
  58.     <div class="progress-bar" id="bar3">div>     
  59.      
  60.     <p>ease-outp>     
  61.     <div class="progress-bar" id="bar4">div>     
  62.      
  63.     <p>ease-in-outp>     
  64.     <div class="progress-bar" id="bar5">div>     
  65. div>     
  66. body>     
  67. html>   

结果分析：鼠标移动上去后，会发生过渡动画。

以上就是本文的全部内容，希望对大家的学习有所帮助。

上一篇：浅析rem和em和px vh vw和% 移动端长度单位浅析CSS中单位px、rem、em、vh、vw之间的区别CSS 中px、em、rem、%、vw、vh单位之间的区别详解CSS3移动端vw+rem不依赖JS实现响应式布局的方法css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况如何利用vw+rem进行移动端布局

下一篇：CSS3 3D旋转rotate效果实例介绍 CSS3让登陆面板3D旋转起来CSS3近阶段篇之酷炫的3D旋转透视 CSS3实现的一款迷人3D木块旋转动画CSS3实现酷炫的3D旋转透视效果

点击排行

洛克王国英魂印记获得方法 英魂印记的作用说明_网络游戏_游戏攻略_

本栏推荐

洛克王国英魂印记获得方法 英魂印记的作用说明_网络游戏_游戏攻略_
发布内容
-六神源码网