<!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. 【IdentityServer4文档】- 使用密码保护 API

    使用密码保护 API OAuth 2.0 协议允许资源拥有者给客户端密码授权:客户端向令牌服务发送用户密码,以获取代表该用户的访问令牌. 该规范建议仅将“资源所有者密码授予”用于“可信”(或旧版)应用 ...

  2. swift - tabBar图片设置的一些注意点

    图片大小尺寸 刚刚开始接触的话,从美工那边拿来的图标大小一般都是偏大的,就像这样: 在此建议,tabBar的图标大小可以是32*32,个人感觉效果不错 图片的颜色问题 如上图所示,该图标的期望颜色(也 ...

  3. C++ Primer Plus学习：第三章

    C++入门第三章:处理数据 面向对象编程(OOP)的本质是设计并扩展自己的数据类型. 内置的C++数据类型分为基本类型和复合类型. 基本类型分为整数和浮点数. 复合类型分为数组.字符串.指针和结构. ...

  4. ranch代码简述

    最近要看一下erlang连接池,觉得ranch很不错. github上面有人写了ranch的代码阅读,可以看一下,链接在这里. 1. ranch可以同时监听多个端口,每个端口的连接信息可以单独配置. ...

  5. 1029C语言文法的理解

    <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...

  6. PAT 甲级 1132 Cut Integer

    https://pintia.cn/problem-sets/994805342720868352/problems/994805347145859072 Cutting an integer mea ...

  7. $(document).click() 在苹果手机上不能正常运行解决方案

    本来是如下一段跳转代码,发现在安卓和微信开发者工具上都能正常运行,但是苹果手机就不行了. $(document).on('click', '.url', function(){ location.hr ...

  8. inno setup 打包exe程序

    inno setup 用于打包生成安装程序, 是通过的一个脚本 可以将 exe 执行文件以安装的形式,解压,添加依赖,创建快捷方式. 例如,我们写了个winform,我们怎么通过安装的形式,给客户的机 ...

  9. Android内存泄漏第一课【转】--------（使用单例模式造成的内存泄漏）

    使用单例模式造成的内存泄漏 Android的单例模式在我们项目开发中经常会用到,不过使用的不恰当的话也会造成内存泄漏.因为单例的静态特性使得单例的生命周期和应用的生命周期一样长, 这就说明了如果一个对 ...

  10. 【Java】全站编码过滤器GenericEncodingFilter代码与配置

    编码过滤器GenericEncodingFilter:   package com.fuck.web.filter; import java.io.IOException; import java.i ...