纯css写的评分鼠标移入的效果附图



复制代码
代码如下:

<!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>

效果如下



相关阅读:
win7系统电脑怎么套用修改网页内容 win7系统电脑套用修改网页内容方法
Win8系统通过IE创建VPN以满足上网需求
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
jsp和servlet的区别探讨
win7/8.1如何免费升级win10?免费升级Win10的正确姿势
js中array的sort()方法使用介绍
JS生成某个范围的随机数【四种情况详解】
ASP.NET读取RSS的方法
用VC++6.0实现石头剪刀布游戏的程序
基于Bootstrap的UI扩展 StyleBootstrap
配置iptables实现本地端口转发的方法详解
两千行代码的PHP学习笔记汇总
php制作的简单验证码识别代码
Win10 Threshold 2内部版本10537将带来全新动画和图标
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4