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. js动态的给json对象添加新的元素

    把{name:"xxx",age:"xxx"}变成{name:"xxx",age:"xxx",value:"x ...

  2. 设置WebBrowser内核渲染模式

    前不久开发一个项目,是采用WebBrowser作为外壳,加载网页,由于网页是采用html5来进行开发的,当通过WebBrowser加载网页后,html5中的特性 都无法正常显示,而通过ie浏览器打开时 ...

  3. Swiper thymeleaf

    html页面: <div class="swiper-container swiper_tjzt"> <div class="swiper-wrappe ...

  4. Spring学习笔记（三）--Convert System设计

    一.概述 转换系统是不同范式系统间交互常常会需要碰到的,如WEB 中HTTP KV文本流到对象的转换和对象到http KV文本流的转换:还有对象到关系型DB和关系型DB到对象之间的转换(ORM). 一 ...

  5. hadoop组件启动和关闭命令

    一.启动相关组件之前 一般安装完hadoop之后需要格式化一遍hdfs: hdfs namenode -format 然后再进行其他组件的启动,hadoop相关组件都是用位于...hadoop/sbi ...

  6. centos 6.5使用virtualenv指定python 2.7.x

    1. 使用现有的 python 2.6.x 安装pip rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8. ...

  7. msyql中子查询IN，EXISTS，ANY，ALL，SOME，UNION介绍

    1.ANY关键字 假设any内部的查询语句返回的结果个数是三个,如:result1,result2,result3,那么, select ...from ... where a > any(.. ...

  8. Python爬虫实战三之实现山东大学无线网络掉线自动重连

    综述 最近山大软件园校区QLSC_STU无线网掉线掉的厉害,连上之后平均十分钟左右掉线一次,很是让人心烦,还能不能愉快地上自习了?能忍吗?反正我是不能忍了,嗯,自己动手,丰衣足食!写个程序解决掉它! ...

  9. HttpContext.Current.Session[strName]未将对象引用设置到对象的实例

    项目开发是在4.5.1上,不知道为啥客户提供的服务器上安装的是4.5,差别不大也没去升级,然后部署MVC的时候web.config报错 <system.web> <compilati ...

  10. HDU 3366 Passage (概率DP)

    题意:T组测试数据,一个人困在了城堡中,有n个通道,m百万money ,每个通道能直接逃出去的概率为 P[i] ,遇到士兵的概率为 q[i], 遇到士兵得给1百万money,否则会被杀掉,还有 1-p ...