純css寫的評分鼠標移入的效果附圖
發(fā)布時間：2014-07-31 11:33:53 作者：佚名 
我要評論
我要評論本節(jié)主要介紹了用純css寫的評分鼠標移入的效果，有圖片，感興趣的朋友可以參考下
復(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鼠標移入圖片動態(tài)提示效果（transform）
本篇文章主要介紹了淺談CSS3鼠標移入圖片動態(tài)提示效果（transform），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-06css3+偽元素實現(xiàn)鼠標移入時下劃線向兩邊展開的效果
這篇文章主要介紹了利用css3+偽元素實現(xiàn)鼠標移入時下劃線向兩邊展開效果的相關(guān)資料，文中先進行了詳細的介紹，方便大家理解，而后給出了完整的實例代碼讓大家可以參考學習2017-04-25- 純CSS實現(xiàn)圖片點擊放大帶關(guān)閉按鈕的圖片特效是一款通過簡單的CSS代碼，實現(xiàn)圖片點擊放大效果的源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-28
CSS實現(xiàn)鼠標移入時圖片的放大效果及緩慢過渡效果的示例代碼
這篇文章主要介紹了CSS實現(xiàn)鼠標移入時圖片的放大效果及緩慢過渡效果的示例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-10
