CSS3新屬性transition-property transform box-shadow實(shí)例學(xué)習(xí)
發(fā)布時(shí)間：2013-06-06 16:34:52 作者：佚名 
我要評論
我要評論本文將為大家介紹下CSS3新屬性transition-property transform box-shadow的使用，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)css3有所幫助
先看效果圖：
正常顯示：
鼠標(biāo)經(jīng)過時(shí)候的效果：
<!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)過時(shí)候的效果：
復(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ū)別
最近在項(xiàng)目中用到了CSS3中的動畫屬性。無奈對于css3幾個(gè)新加的屬性不太熟悉，常常容易搞混。所以從網(wǎng)站研究了點(diǎn)資料，總結(jié)一下，方便有需要的朋友們可以參考學(xué)習(xí)。2016-09-25- 這篇文章主要為大家詳細(xì)介紹了CSS3中Transition動畫屬性用法，教大家如何使用Transition動畫，感興趣的小伙伴們可以參考一下2016-07-04
CSS3中的Transition過度與Animation動畫屬性使用要點(diǎn)
這篇文章主要介紹了CSS3中的Transition過度與Animation動畫屬性使用要點(diǎn)Transition和Animation能被用來制作基本的頁面圖片動態(tài)效果,當(dāng)然進(jìn)一步的控制還是需要JavaScript的2016-05-20基于css3的屬性transition制作菜單導(dǎo)航效果
這篇文章主要為大家介紹了基于css3的屬性transition制作菜單導(dǎo)航效果,可實(shí)現(xiàn)鼠標(biāo)滑過菜單項(xiàng)動態(tài)改變背景滑塊的功能,基于css3的屬性transition實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的2015-09-01利用CSS3的transition屬性實(shí)現(xiàn)滑動效果
這篇文章主要介紹了利用CSS3的transition屬性實(shí)現(xiàn)滑動效果,是CSS3入門學(xué)習(xí)時(shí)的基本應(yīng)用,需要的朋友可以參考下2015-08-05- 這篇文章主要介紹了css3的transition屬性詳解,需要的朋友可以參考下2014-12-15
- W3C標(biāo)準(zhǔn)中對CSS3的transition這是樣描述的:“CSS的transition允許CSS的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎?/div> 2014-09-02
使用css transition屬性實(shí)現(xiàn)一個(gè)帶動畫顯隱的微信小程序部件
這篇文章主要介紹了使用css transition屬性實(shí)現(xiàn)一個(gè)帶動畫顯隱的微信小程序部件的相關(guān)資料,需要的朋友可以參考下2018-06-13最新評論
