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. Build/Run Instructions for Codec Engine Examples

    General Information This page explains how to build the examples provided in the Codec Engine (CE) p ...

  2. ArraySegment的用法

    string[] myArr = { "Overred", "Medloy", "Xiaoguai", "Hare" } ...

  3. sh 脚本

    more log.log| awk '{if($1>"15:10:54.851" && length($1)==12){print $0}}'

  4. java中的==、equals()、hashCode()

    java中的==.equals().hashCode()源码分析 在java编程或者面试中经常会遇到 == .equals()的比较.自己看了看源码,结合实际的编程总结一下. 1. ==  java中 ...

  5. VUE+WebPack实现精美Html5游戏设计：纸牌战争

  6. java反射对实体类取值和赋值，可以写成通过实体类获取其他元素的数据，很方便哦~~~

    项目中需要过滤前面表单页面中传过来的实体类的中的String类型变量的前后空格过滤,由于前几天看过一个其他技术博客的的java反射讲解,非常受益.于是,哈哈哈 public static <T& ...

  7. 380. Insert Delete GetRandom O(1) 设计数据结构：在1的时间内插入、删除、产生随机数

    ［抄题］: Design a data structure that supports all following operations in average O(1) time. insert(va ...

  8. GRUB使用说明

    从Red Hat Linux 7.2起,GRUB(GRand Unified Bootloader)取代LILO成为了默认的启动装载程序.相信LILO对于大家来说都是很熟悉的.这次Red Hat Li ...

  9. 关于jdk7中 使用Collections的排序方法时报Comparison method violates its general contract!异常

    参考: Comparison method violates its general contract Comparison method violates its general contract! ...

  10. mosquitto配置通过ssl通信

    mosquitto配置通过ssl通信 摘自https://www.cnblogs.com/stin/p/9258211.html 注意项: For openssl >= 1.0.1 the va ...