CSS3过渡transition效果实例介绍

时间：2021-05-08

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

效果图：

实现代码：

transition.html

XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>Transition</title>
  • <style>
  • #block{
  • width:400px;
  • height:300px;
  • background-color:#69C;
  • margin:0auto;
  • transition:background-color1s,width0.5sease-out;
  • -webkit-transition:background-color1s,width0.5sease-out;
  • }
  • #block:hover{
  • background-color:red;
  • width:600px;
  • }
  • </style>
  • </head>
  • <body>
  • <divid="block">
  • </div>
  • </body>
  • </html>

    • transitionDemo.html

    XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>TransitionDemo</title>
  • <style>
  • #wrapper{
  • width:1024px;
  • margin:0auto;
  • }
  • .progress-bar-bg{
  • width:960px;
  • background-color:lightyellow;
  • }
  • .progress-bar{
  • height:40px;
  • width:40px;
  • background-color:#69C;
  • border:1pxsolidlightyellow;
  • border-radius:5px;
  • }
  • .progress-bar:hover{
  • width:960px;
  • }
  • #bar1{
  • -webkit-transition:width5slinear;
  • }
  • #bar2{
  • -webkit-transition:width5sease;
  • }
  • #bar3{
  • -webkit-transition:width5sease-in;
  • }
  • #bar4{
  • -webkit-transition:width5sease-out;
  • }
  • #bar5{
  • -webkit-transition:width5sease-in-out;
  • }
  • </style>
  • </head>
  • <body>
  • <divid="wrapper">
  • <p>linear</p>
  • <divclass="progress-bar-bg">
  • <divclass="progress-bar"id="bar1"></div>
  • </div>
  • <p>ease</p>
  • <divclass="progress-bar"id="bar2"></div>
  • <p>ease-in</p>
  • <divclass="progress-bar"id="bar3"></div>
  • <p>ease-out</p>
  • <divclass="progress-bar"id="bar4"></div>
  • <p>ease-in-out</p>
  • <divclass="progress-bar"id="bar5"></div>
  • </div>
  • </body>
  • </html>

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

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

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章