纯css写的评分鼠标移入的效果附图
发布时间：2014-07-31 11:33:53 作者：佚名 
我要评论
我要评论本节主要介绍了用纯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>
效果如下
相关文章
本篇文章主要介绍了浅谈CSS3鼠标移入图片动态提示效果（transform），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-06- 这篇文章主要介绍了利用css3+伪元素实现鼠标移入时下划线向两边展开效果的相关资料，文中先进行了详细的介绍，方便大家理解，而后给出了完整的实例代码让大家可以参考学习2017-04-25
- 纯CSS实现图片点击放大带关闭按钮的图片特效是一款通过简单的CSS代码，实现图片点击放大效果的源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-28
- 这篇文章主要介绍了CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-10
最新评论