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. 从socket开始讲IOS网络编程

    home list tags talk user rss Mac&iOS Socket 大纲 一.Socket简介 二.BSD Socket编程准备 1.地址 2.端口 3.网络字节序 4.半 ...

  2. Java多线程-线程的生命周期

    线程可以分为4个状态:New(新生),Runnable(可运行):为了方便分析,还可将其分为:Runnable与Running.blocked(被阻塞),Dead(死亡). 与人有生老病死一样,线程也 ...

  3. 前端开发之CSS篇二

    主要内容: 一.CSS的继承性和层叠性 二.盒模型 三.padding属性 四.border属性 五.margin属性 六.标准文档流 七.行内元素和块状元素转换 1️⃣  CSS的继承性和层叠性 1 ...

  4. Excel VBA入门（五）Excel对象操作

    本章是本系列教程的重点.但我觉得应该不是难点.从第零章开始到学完本章,应该可以把VBA用于实战中了. Excel对象主要有4个: 工作薄 Workbook 工作表 Worksheet 单元格区域 Ra ...

  5. JS中深拷贝数组、对象、对象数组方法（转载）

    我们在JS程序中需要进行频繁的变量赋值运算,对于字符串.布尔值等可直接使用赋值运算符 “=” 即可,但是对于数组.对象.对象数组的拷贝,我们需要理解更多的内容. 首先,我们需要了解JS的浅拷贝与深拷贝 ...

  6. spring4-2-bean配置-10-通过FactoryBean配置bean

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAk8AAAFHCAIAAAA3Hj/JAAAgAElEQVR4nO2dzdX0rA2Gp6asclwQTW

  7. solr自动提示 - jquery ui autocomplete

    需求: 搜索框中 输入部分关键词之后,有下拉联想提示.选中提示,使用鼠标或者使用enter键,则触发搜索功能.没有选择搜索提示,使用部分输入关键词作为搜索,直接使用enter键也能触发搜索功能.整个过 ...

  8. [SoapUI] Context is per test case, every test case has a different context

  9. jquery设置select选中的文本

    <select id="prov">  <option value="1">北京市</option>  <option ...

  10. 【解决】SOUI向导生成项目（VC2013以上版本编译时）无法运行XP解决

    对于SOUI向导生成的项目,无法在XP运行(提示 不是有效的WIN32程序 ) 即便设置为: 也无效,使用eXeScope打开发现最低系统要求是6.0,也就是说最少要WINXP以上,例如WIN7才能运 ...