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. PHP笔试题及答案

    1.表单提交get和post有何区别? 答:get的方式是把数据在地址栏中发送,get传送的数据量较小,不能大于2KB.post传送的数据量较大,一般被默认为不受限制.但理论上,IIS4中最大量为80 ...

  2. 第1章WCF简介（WCF全面解析读书笔记2）

    第1章 WCF简介 面向服务架构(SOA)是近年来备受业界关注的一个主题,它代表了软件架构的一种方向.顺应SOA发展潮流,微软于2006年年底推出了一种新的分布式通信框架Windows Communi ...

  3. Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

    http://localhost:3000/

  4. nodemon 的坑

    1. 我的系统是ubuntu18.04.2 的 在使用过程中不知道什么为题 nodemon 运行的项目不在前台打印了项目, 我监听的端口 9302 一直在运行, 前台看不到 我想停止掉用 ps -ef ...

  5. 微信小程序开发教程，大多数人都搞错的八个问题

    小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列 ...

  6. Opencv 发现轮廓 findContours

    vector<vector<Point>> vec_p; vector<Vec4i> vec_4f; findContours(img_canny1, vec_p, ...

  7. OpenCV学习记录（二）：自己训练haar特征的adaboost分类器进行人脸识别 标签： 脸部识别opencv 2017-07-03 21:38 26人阅读

    上一篇文章中介绍了如何使用OpenCV自带的haar分类器进行人脸识别(点我打开). 这次我试着自己去训练一个haar分类器,前后花了两天,最后总算是训练完了.不过效果并不是特别理想,由于我是在自己的 ...

  8. [Training Video - 6] [File Reading] [Java] Create and Write Excel File Using Apache POI API

    package com.file.properties; import java.io.File; import java.io.FileNotFoundException; import java. ...

  9. 实践作业3：白盒测试----junit的难点DAY11.

    本次白盒测试 需要独立完成整个项目和工具的配置安装运行操作,并编写.运行测试脚本,并完成实验的一些小细节等等. 首先,导入Junit测试框架所需的Jar包 然后编写测试脚本,为.java运行程序,见打 ...

  10. mysql表名忽略大小写配置

    linux下mysql默认是要区分表名大小写的.mysql是否区分大小写设置是由参数lower_case_table_names决定的,其中:1)lower_case_table_names = 0  ...