CSS3過渡transition效果實(shí)例介紹
發(fā)布時(shí)間:2016-05-03 16:01:04 作者:佚名
我要評(píng)論

這篇文章主要為大家詳細(xì)介紹了CSS3過渡transition效果實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了CSS3過渡transition效果,供大家參考,具體內(nèi)容如下
效果圖:
實(shí)現(xiàn)代碼:
transition.html
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Transition</title>
- <style>
- #block {
- width: 400px;
- height: 300px;
- background-color: #69C;
- margin: 0 auto;
- transition: background-color 1s, width 0.5s ease-out;
- -webkit-transition: background-color 1s, width 0.5s ease-out;
- }
- #block:hover {
- background-color: red;
- width: 600px;
- }
- </style>
- </head>
- <body>
- <div id="block">
- </div>
- </body>
- </html>
transitionDemo.html
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>TransitionDemo</title>
- <style>
- #wrapper {
- width: 1024px;
- margin: 0 auto;
- }
- .progress-bar-bg {
- width: 960px;
- /*background-color: aliceblue;*/
- background-color: lightyellow;
- }
- .progress-bar {
- height: 40px;
- width: 40px;
- background-color: #69C;
- border: 1px solid lightyellow;
- border-radius: 5px;
- }
- .progress-bar:hover {
- width: 960px;
- }
- #bar1 {
- -webkit-transition: width 5s linear;
- /*-webkit-transition: width 5s steps(6, end);*/
- /*-webkit-transition: width 5s step-start;*/
- }
- #bar2 {
- -webkit-transition: width 5s ease;
- }
- #bar3 {
- -webkit-transition: width 5s ease-in;
- }
- #bar4 {
- -webkit-transition: width 5s ease-out;
- }
- #bar5 {
- -webkit-transition: width 5s ease-in-out;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- <p>linear</p>
- <div class="progress-bar-bg">
- <div class="progress-bar" id="bar1"></div>
- </div>
- <p>ease</p>
- <div class="progress-bar" id="bar2"></div>
- <p>ease-in</p>
- <div class="progress-bar" id="bar3"></div>
- <p>ease-out</p>
- <div class="progress-bar" id="bar4"></div>
- <p>ease-in-out</p>
- <div class="progress-bar" id="bar5"></div>
- </div>
- </body>
- </html>
結(jié)果分析:鼠標(biāo)移動(dòng)上去后,會(huì)發(fā)生過渡動(dòng)畫。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
詳解css3 Transition屬性(平滑過渡菜單欄案例)
這篇文章主要介紹了詳解css3 Transition屬性(平滑過渡菜單欄案例)的相關(guān)資料,需要的朋友可以參考下2017-09-05- 大家都知道過渡動(dòng)畫是動(dòng)畫的基礎(chǔ),在學(xué)習(xí)動(dòng)畫屬性之前,我們需要先了解過渡屬性transition,下面這篇文章通過示例代碼給大家詳細(xì)介紹了CSS3中的元素過渡屬性transition,有2016-11-30
CSS3使用transition屬性實(shí)現(xiàn)過渡效果
CSS3中新增的transform屬性,可以實(shí)現(xiàn)元素在變換過程中的過渡效果,實(shí)現(xiàn)了基本的動(dòng)畫。下面通過本文給大家介紹CSS3使用transition屬性實(shí)現(xiàn)過渡效果,需要的朋友參考下本文2018-04-18