<!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. lintcode-394-硬币排成线

    394-硬币排成线 有 n 个硬币排成一条线.两个参赛者轮流从右边依次拿走 1 或 2 个硬币,直到没有硬币为止.拿到最后一枚硬币的人获胜. 请判定 第一个玩家 是输还是赢? 样例 n = 1, 返回 ...

  2. Swift-闭包使用及解决循环引用问题

    Swift中闭包使用参考OC中block使用,基本一致 // 闭包类型 首先写(参数列表)->(返回值类型) func loadData(callBack : (jsonData:String) ...

  3. "firstday"-软件工程

    阅读以下文章 http://www.thea.cn/news/terminal/9/9389.html    http://www.shzhidao.cn/system/2015/09/22/0102 ...

  4. 201621123037 《Java学习设计》 第五周学习总结

    Week05-继承.多态.抽象类与接口 1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 关键词:接口."has-a".多态.comparable.Compa ...

  5. influxdb 命令

    写入数据: curl -X POST -d '[{"name":"foo","columns":["val"],&quo ...

  6. Linux 常用指令【持续更新】

    在学校的时候学过一些简单的 Linux 命令,主要是文件的创建拷贝解压等操作,最近在电脑上安装了一个CentOS6.8版本的基本版,纯命令行操作. ../ 代表上一级目录 ./ 代表本级目录 / 代表 ...

  7. 【.Net】Net开发

    博客里的好多文章都是本人看着比较好,就转过来的,好少自己亲自去写点什么,也很少把自己学的一点心得于大家分享,今天特别想聊一下,关于本人做Net开发时的那段回忆! 一.关于知识的回忆 还记得Handle ...

  8. java 常量 jvm在编译期能确定常量的 所以相等 但不能确定变量的范围 所以变量相加会产生新的

  9. 【bzoj3560】DZY Loves Math V 欧拉函数

    题目描述 给定n个正整数a1,a2,…,an,求 的值(答案模10^9+7). 输入 第一行一个正整数n. 接下来n行,每行一个正整数,分别为a1,a2,…,an. 输出 仅一行答案. 样例输入 3 ...

  10. C++解析(7)：函数重载分析

    0.目录 1.重载的概念 2.C++中的函数重载 3.函数默认参数遇上函数重载 4.编译器调用重载函数的准则 5.重载与指针 6.C++和C相互调用 7.小结 1.重载的概念 自然语言中的上下文--你 ...