純css寫的評(píng)分鼠標(biāo)移入的效果附圖
發(fā)布時(shí)間:2014-07-31 11:33:53 作者:佚名
我要評(píng)論
本節(jié)主要介紹了用純css寫的評(píng)分鼠標(biāo)移入的效果,有圖片,感興趣的朋友可以參考下
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
span {
display: block;
width: 30px;
height: 30px;
padding-left: 30px;
background-image: url(http://images.cnitblog.com/blog/294743/201304/21141707-77236dc5976d4f7db624bf3a5d2eee28.gif);
background-repeat: no-repeat;
background-position: 0 -3px;
}
span span span span span {
padding-left: 0;
}
span:hover {
background-position: 0 -31px;
}
</style>
<span>
<span>
<span>
<span>
<span></span>
</span>
</span>
</span>
</span>
</body>
</html>
效果如下
相關(guān)文章

淺談CSS3鼠標(biāo)移入圖片動(dòng)態(tài)提示效果(transform)
本篇文章主要介紹了淺談CSS3鼠標(biāo)移入圖片動(dòng)態(tài)提示效果(transform),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-11-06css3+偽元素實(shí)現(xiàn)鼠標(biāo)移入時(shí)下劃線向兩邊展開的效果
這篇文章主要介紹了利用css3+偽元素實(shí)現(xiàn)鼠標(biāo)移入時(shí)下劃線向兩邊展開效果的相關(guān)資料,文中先進(jìn)行了詳細(xì)的介紹,方便大家理解,而后給出了完整的實(shí)例代碼讓大家可以參考學(xué)習(xí)2017-04-25純CSS實(shí)現(xiàn)商品圖片點(diǎn)擊放大效果
純CSS實(shí)現(xiàn)圖片點(diǎn)擊放大帶關(guān)閉按鈕的圖片特效是一款通過簡(jiǎn)單的CSS代碼,實(shí)現(xiàn)圖片點(diǎn)擊放大效果的源碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-28CSS實(shí)現(xiàn)鼠標(biāo)移入時(shí)圖片的放大效果及緩慢過渡效果的示例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)移入時(shí)圖片的放大效果及緩慢過渡效果的示例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-10


