|
導讀網(wǎng)頁的本質(zhì)就是超級文本標記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家?guī)淼膬?nèi)容是關(guān)于css3中如何利用transition實現(xiàn)鼠標懸停的時候div的顏色、高度和寬度都改變的效果,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。我們平時在瀏覽web網(wǎng)頁的時候會見到這樣一種情況:當鼠標懸停的某個區(qū)域的時候,該區(qū)域的形狀會在指定時間內(nèi)進行放大或者縮小的變化,甚至在變化大小的同時會出現(xiàn)顏色的漸變。這種特殊效果是如何實現(xiàn)的呢?現(xiàn)在由我來向大家介紹一下在css3中如何使用transition屬性和hover屬性實現(xiàn)div顏色漸變和放大縮小的效果。 css3中transition屬性 transition屬性是一個簡寫屬性,用于四個過度屬性,分別是transition-property,transition-duration,transition-timing-function和transition-delay。
transition屬性和瀏覽器的兼容(根據(jù)W3C標準)
Internet Explorer 10、Firefox、Opera和Chrome等高版本瀏覽器支持transition屬性標準寫法。Safari支持替代的-webkit-transition 屬性。但是Internet Explorer 9以及更早版本的瀏覽器不支持transition屬性。 css3鼠標移入特效的實現(xiàn)代碼 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
.box{
width:100px;
height:100px;
background-color:blue;
transition-duration:2s;
transition-timing-function:ease;
transition-delay:0s;
transition-property:all;
}
.box:hover{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> css3鼠標移入特效實現(xiàn)效果如圖所示 以上就是css3鼠標移入特效:如何實現(xiàn)div顏色漸變和放大縮小的效果的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設是一個廣義的術(shù)語,涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!