CSS3新屬性transition-property transform box-shadow實例學(xué)習(xí)
發(fā)布時間:2013-06-06 16:34:52 作者:佚名
我要評論

本文將為大家介紹下CSS3新屬性transition-property transform box-shadow的使用,感興趣的朋友可以參考下哈,希望對你學(xué)習(xí)css3有所幫助
先看效果圖:
正常顯示:
鼠標(biāo)經(jīng)過時候的效果:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS3新屬性2013-05-21</title>
<style>
.test li:hover{border-color:#999;background-color:#bbb;color:#999;}
.text{ margin:5px;float:left; background:#FFF; height:250px; width:200px; border:1px solid #CCC; transition-property:all; transition-duration:.5s; transition-timing-function:ease-out;-moz-transition-property:all;-ms-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;-moz-transition-duration:.5s;-ms-transition-duration:.5s;-o-transition-duration:.5s;-webkit-transition-duration:.5s;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;-webkit-transition-timing-function:ease-in;}
.text:hover{ box-shadow:0 0 10px #CCCCCC;-moz-box-shadow:0 0 10px #CCCCCC;-ms-box-shadow:0 0 10px #CCCCCC;-o-box-shadow:0 0 10px #CCCCCC;-webkit-box-shadow:0 0 10px #CCCCCC; transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);-webkit-transform:scale(1.2);}
</style>
</head>
<body>
<div class="text">
<p>請測試css3</p>
</div>
<div class="text">
<p>請測試css3</p>
</div>
<div class="text">
<p>請測試css3</p>
</div>
<div class="text">
<p>請測試css3</p>
</div>
<div class="text">
<p>請測試css3</p>
</div>
</body>
</html>
正常顯示:

鼠標(biāo)經(jīng)過時候的效果:

復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS3新屬性2013-05-21</title>
<style>
.test li:hover{border-color:#999;background-color:#bbb;color:#999;}
.text{ margin:5px;float:left; background:#FFF; height:250px; width:200px; border:1px solid #CCC; transition-property:all; transition-duration:.5s; transition-timing-function:ease-out;-moz-transition-property:all;-ms-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;-moz-transition-duration:.5s;-ms-transition-duration:.5s;-o-transition-duration:.5s;-webkit-transition-duration:.5s;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;-webkit-transition-timing-function:ease-in;}
.text:hover{ box-shadow:0 0 10px #CCCCCC;-moz-box-shadow:0 0 10px #CCCCCC;-ms-box-shadow:0 0 10px #CCCCCC;-o-box-shadow:0 0 10px #CCCCCC;-webkit-box-shadow:0 0 10px #CCCCCC; transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);-webkit-transform:scale(1.2);}
</style>
</head>
<body>
<div class="text">
<p>請測試css3</p>
</div>
<div class="text">
<p>請測試css3</p>
</div>
<div class="text">
<p>請測試css3</p>
</div>
<div class="text">
<p>請測試css3</p>
</div>
<div class="text">
<p>請測試css3</p>
</div>
</body>
</html>
相關(guān)文章
CSS3中動畫屬性transform、transition和animation屬性的區(qū)別
最近在項目中用到了CSS3中的動畫屬性。無奈對于css3幾個新加的屬性不太熟悉,常常容易搞混。所以從網(wǎng)站研究了點資料,總結(jié)一下,方便有需要的朋友們可以參考學(xué)習(xí)。2016-09-25- 這篇文章主要為大家詳細(xì)介紹了CSS3中Transition動畫屬性用法,教大家如何使用Transition動畫,感興趣的小伙伴們可以參考一下2016-07-04
CSS3中的Transition過度與Animation動畫屬性使用要點
這篇文章主要介紹了CSS3中的Transition過度與Animation動畫屬性使用要點Transition和Animation能被用來制作基本的頁面圖片動態(tài)效果,當(dāng)然進(jìn)一步的控制還是需要JavaScript的2016-05-20基于css3的屬性transition制作菜單導(dǎo)航效果
這篇文章主要為大家介紹了基于css3的屬性transition制作菜單導(dǎo)航效果,可實現(xiàn)鼠標(biāo)滑過菜單項動態(tài)改變背景滑塊的功能,基于css3的屬性transition實現(xiàn),非常具有實用價值,需要的2015-09-01利用CSS3的transition屬性實現(xiàn)滑動效果
這篇文章主要介紹了利用CSS3的transition屬性實現(xiàn)滑動效果,是CSS3入門學(xué)習(xí)時的基本應(yīng)用,需要的朋友可以參考下2015-08-05- 這篇文章主要介紹了css3的transition屬性詳解,需要的朋友可以參考下2014-12-15
- W3C標(biāo)準(zhǔn)中對CSS3的transition這是樣描述的:“CSS的transition允許CSS的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎?/div> 2014-09-02
使用css transition屬性實現(xiàn)一個帶動畫顯隱的微信小程序部件
這篇文章主要介紹了使用css transition屬性實現(xiàn)一個帶動畫顯隱的微信小程序部件的相關(guān)資料,需要的朋友可以參考下2018-06-13最新評論