html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    * {

        margin: 0;

        padding: 0;

    }

    a {

        text-decoration: none;

        color: #333;

    }

    .box {

        width: 55px;

        height: 55px;

        overflow: hidden;

        display: block;

    }

    .box img {

        width: 55px;

        height: 55px;

        display: block;

        border-radius: 5px;

        float: left;

    }

    .box i {

        width: 55px;

        height: 55px;

        display: block;

        text-align: center;

        color: #888;

        font-size: 20px;

        line-height: 55px;

        transition: all .3s linear;

        -webkit-transition: all .3s linear;

        -moz-transition: all .3s linear;

        -o-transition: all .3s linear;

        -ms-transition: all .3s linear;

        font: normal 24px/55px Arial, Helvetica, sans-serif;

        background-color: #3F6F12;

    }

    .box:hover i {

        height: 0;

        line-height: 150px;

    }

    </style>

</head>

<body>

    <div class="box">

        <i>1</i>

        <img src="http://pic.2265.com/upload/2017-3/2017331931498082.png" />

    </div>

</body>

</html>

效果图：

hover效果

css3 hover效果的更多相关文章

  1. css3 hover 效果

    链接 链接 链接 链接 大量级 11 22  类似拉勾  33 包括各种流行的hover 小众 极光

  2. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  3. Web页面中5种超酷的Hover效果

    hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这 ...

  4. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. css3 3D效果

    css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...

  6. 那些不错的 [ Html5 + CSS3 + Canvas ] 效果！

    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

  7. 35个让人惊讶的CSS3动画效果

    1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery  ...

  8. HTML页面中5种超酷的伪类选择器:hover效果

    想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点. 给平淡的站点带来活力 hover效果能给网页增加一些动态 ...

  9. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

随机推荐

  1. 【原】Coursera—Andrew Ng机器学习—Week 5 习题—Neural Networks learning

    课上习题 [1]代价函数 [2]代价函数计算 [3] [4]矩阵的向量化 [5]梯度校验 Answer:(1.013 -0.993) / 0.02 = 3.001 [6]梯度校验 Answer:学习的 ...

  2. lucene3.0范围查找

    在lucene3.0以上版本中,范围查询也有很大的变化,RangeQuery已经不推荐使用,使用TermRangeQuery和NumericRangeQuery两个替代.TermRangeQuery: ...

  3. mysql存储过程(procedure)

    #创建带参数的存储过程 delimiter // ),out p int) begin ; end // delimiter call pro_stu_name_pass(@n,@p); select ...

  4. 2018/4/26 python文件处理方式

    目录 2018/4/26总结 1. 如果有一天群内问题总结: 问题:python2和python3的默认编码是什么? 2. python学习总结: python的处理文件方式 2018/4/26总结 ...

  5. 【2018沈阳赛区网络预选赛J题】Fantastic Graph 【有上下界的网络流】

    要补的题太多了导致最近没写博客(好吧是我懒) 题目链接https://nanti.jisuanke.com/t/31447 题意 给出一个二分图,问能否挑选出一些边,使得每个点的度数都在[L,R]这个 ...

  6. Convert Sorted Array to Binary Search Tree数组变成高度平衡的二叉树

    ［抄题］: Given an array where elements are sorted in ascending order, convert it to a height balanced B ...

  7. 用python控制路由器

    前言 最近用爬虫爬豆瓣上的资料,无奈总是被封,agent伪装和cookie修改这些都用过了,可惜都起不了什么作用,到了一定次数,还是会返回403.想用代理ip,无奈免费的太不稳定,买收费的又有点没必要 ...

  8. 采用AutoIt实现文件上传

    在非常规的上传界面中,AutoIt可以操作Windows资源管理器实现上传路径的输入. AutoIt中编辑以下脚本,需通过“AutoIt Windows Info”定位资源管理器路径输入位置信息及打开 ...

  9. MicroRNA 详解

    MicroRNA研究历史和方法   Views 88 1Report

  10. es学习-java操作 2.4.0版本

    package esjava; import org.elasticsearch.action.bulk.*;import org.elasticsearch.action.delete.Delete ...