<!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. (转）ActiveMQ的重连机制

    花了一天的时间,终于搞明白了我的疑问. failover://(tcp://localhost:6168)?randomize=false&initialReconnectDelay=100& ...

  2. php奇葩错误：htmlspecialchars处理中文丢失

    $value = "中文中文"; $res = htmlspecialchars($value); 经过这个函数处理之后,$res就直接变成了空的字符串. 奇葩错误啊!后来发现要这 ...

  3. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

  4. HDU4473_Exam

    很考验智商的一个题目,赛后看完别人的题解后秒懂了. 首先定义一个函数f(x)表示a,b的有序组合情况数使得a*b为x的一个约数. 现在给定你一个n,要你求出f(1)+f(2)+……+f(n): 题目智 ...

  5. Struts创建流程

    1.启动服务,加载web.xml 并实例化StrutsPrepareAndExecuteFilter过滤器 2.在实例化StrutsPrepareAndExecuteFilter的时候会执行过滤器中的 ...

  6. OSPF协议介绍及配置 （上）

    OSPF协议介绍及配置 (上) 一.OSPF概述 回顾一下距离矢量路由协议的工作原理:运行距离矢量路由协议的路由器周期性的泛洪自己的路由表,通过路由的交互,每台路由器都从相邻的路由器学习到路由,并且加 ...

  7. Shortest Prefixes POJ - 2001（统计次数）

    题意: 输出每个单词的缩写  使得每个单词 互不相同.. 解析: 统计每个前出现的次数...然后在查询的时候  遇到次数为1的返回即可.. #include <iostream> #inc ...

  8. lxm --- ans lb config

    lxm --- ans lb config #ANS2.2 Build 160.006 # Last modified by `save config`, Fri Oct 12 17:15:42 20 ...

  9. Ckeditor与Ckfinder(java)整合实现富媒体内容编辑(支持文件上传)

    先来看一下最终的效果图 一.编辑器界面 二.上传图片界面 <!-------------------------------------------------------> 一.安装包下 ...

  10. Android Native jni 编程 Android.mk 文件编写

    LOCAL_PATH 必须位于Android.mk文件的最开始.它是用来定位源文件的位置,$(call my-dir)的作用就是返回当前目录的路径. LOCAL_PATH := $(call my-d ...