<!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. VUE AXIOS 跨域问题

    背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...

  2. App接口如何保证安全

    微信开发或者高德地图,百度地图什么的api要使用,使用之前都需要注册一个账号,然后系统会给你一个key,然后调用api的时候把key传给服务器. 平常公司内部开发项目时,直接用mvc为app客户端提供 ...

  3. scala程序运行的几种方式

    HelloWorld简单实例 object HelloWorld{ def main(args:Array[String]){ println("HelloWorld") } } ...

  4. 复利计算C语言转java的相关代码

    static void principal()// 计算本金 { int N, m; double i, F, P; System.out.printf("复利终值:"); F = ...

  5. 用友 SAP 金蝶 季报

    用友 2018Q3季报 营收:.42亿 营收收入同比增长:42.36% 净利润:.35万 净利润同比增长率:113.83% 销售毛利率:66.88% 销售净利率:19.29% 用友2017财年年报 营 ...

  6. 虚拟机中安装 centOS，本地安装 SSH 连接 - 01

    下面把自己安装 centOS 的过程记录下,选取的版本是 centOS6.8 ,下载地址在脚本之家 down 的 : 阿里云 x64 http://mirrors.aliyun.com/centos/ ...

  7. solr源码分析之solrclound

    一.简介 SolrCloud是Solr4.0版本以后基于Solr和Zookeeper的分布式搜索方案.SolrCloud是Solr的基于Zookeeper一种部署方式.Solr可以以多种方式部署,例如 ...

  8. 【开发工具IDE】JAVA-eclipse使用汇集

    -------------------------------------------------------------------------------------------------- 1 ...

  9. [二十]SpringBoot 之 （多）文件上传

    (1)新建maven Java project 新建一个名称为spring-boot-fileuploadmaven java项目 (2)在pom.xml加入相应依赖: <project xml ...

  10. 【刷题】BZOJ 2260 商店购物

    Description Grant是一个个体户老板,他经营的小店因为其丰富的优惠方案深受附近居民的青睐,生意红火.小店的优惠方案十分简单有趣.Grant规定:在一次消费过程中,如果您在本店购买了精制油 ...