<!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(https://images0.cnblogs.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>

效果如下

无聊，纯css写了个评分鼠标移入的效果的更多相关文章

  1. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  2. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  3. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  4. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

  5. 还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  6. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  7. 使用纯 CSS 实现超酷炫的粘性气泡效果

    最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG ...

  8. CSS3的过渡效果，使用transition实现鼠标移入/移出效果

    在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬.以前如果要实现过渡,就需要借助第三方的js框架来实现.现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式 ...

  9. antd card 组件实现鼠标移入移出效果

    鼠标移出: 鼠标移入: import React, { Component } from 'react' import { Card, Icon, Avatar } from 'antd'; cons ...

随机推荐

  1. 使用ssh公钥登陆

    记录一下使用的具体命令,具体参考: Centos设置禁止密码登录而只使用密钥登录SSH方法  优先参考这个. ssh使用公钥授权不通过的问题解决 Xshell配置ssh免密码登录-密钥公钥(Publi ...

  2. jQuery之_元素滚动

    对应的知识点铺垫,但是有一个很重要的问题就是兼容IE和chorme的 1. scrollTop(): 读取/设置滚动条的Y坐标2. $(document.body).scrollTop()+$(doc ...

  3. KeyBoard 操作 ！

    键盘操作:tab/ enter/ crtl+c ,crtl+v ; import java.awt.*; import java.awt.datatransfer.StringSelection; i ...

  4. LR监控tomcat服务器

    采用编写VuGen脚本访问Tomcat的Status页面的方式获取性能数据(利用了关联和lr_user_data_point函数),本质上还是使用tomcat自带的监控页面,只是将监控结果加到LR的a ...

  5. 服务器控件的异步请求——UpdatePanel和ScriptManager

    aspx文件里面有以下一段代码 <body> <form id="form1" runat="server"> <div> ...

  6. CGLib动态代理引起的空指针异常

    一个同事将公司的开发框架基于最新的Spring.Tomcat.Java版本作了部分修改,拿来开发运行之后,发现一个奇怪的空指针异常. 还原一下当时的场景,代码大概如下,所有的Servlet继承自Bas ...

  7. 部分NodeJs

    一.cnmp的操作: 1.cnmp info jquery查询jquery的版本: 2.cnmp install jquery@1.11.1:安装: 3.cnmp list查询所有下载的内容: 4.c ...

  8. Qt的编程风格与规范

    Qt的编程风格与规范 来源: http://blog.csdn.net/qq_35488967/article/details/70055490 参考资料: https://wiki.qt.io/Qt ...

  9. [洛谷P4626]一道水题 II

    题目大意:求$lcm(1,2,3,\cdots,n)\pmod{100000007}$,$n\leqslant10^8$ 题解:先线性筛出质数,然后求每个质数最多出现的次数,可以用$\log_in$来 ...

  10. 洛谷 P4240 毒瘤之神的考验 解题报告

    P4240 毒瘤之神的考验 题目背景 \(\tt{Salamander}\)的家门口是一条长长的公路. 又是一年春天将至,\(\tt{Salamander}\)发现路边长出了一排毒瘤! \(\tt{S ...