今天在编程爱好者编码库看见一个好玩的程序，代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
 
    <title>CSS3实现小米商城鼠标移动图片上浮阴影效果</title>
    <style>
        *{margin: 0;padding: 0;font-family: '微软雅黑','Helvetica Neue', Arial, sans-serif}
        body{
            background-color: #f5f5f5;
            text-align: center;
        }
 
        .image-shadow{
            position:relative;  /*设置为相对*/
            margin: 60px auto;
            z-index: 1;
            width: 294px;
            height: 413px;
            background: #fff;
            -webkit-transition: all .2s linear; /*渐变效果*/
            transition: all .2s linear;
        }
         
        .image-shadow:hover{
            z-index: 2; /*设置在顶层显示*/
            -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);    /*添加阴影*/
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            -webkit-transform: translate3d(0, -2px, 0);     /*向上浮动*/
            transform: translate3d(0, -2px, 0);
        }
         
    </style>
</head>
<body>
 
<h3 style="margin: 60px 0 20px 0; text-align: center">CSS3实现小米商城鼠标移动图片上浮阴影效果</h3>
 
<div class="image-shadow">
</div>
 
</body>
</html>

css3实现小米商城鼠标移动图片上浮阴影效果的更多相关文章

  1. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  2. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  3. 通过CSS3实现：鼠标悬停图片360度旋转效果

    效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...

  4. 纯css3鼠标经过图片显示描述特效

    http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览   ...

  5. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  6. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  7. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  8. CSS3鼠标悬停图片动画

    鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...

  9. CSS3实现鼠标经过图片时图片放大

    在鼠标经过图片时,图片被放大,而且还有个过渡的效果.... <!DOCTYPE html> <html> <head> <link href="cs ...

随机推荐

  1. css布局实践心得总结

    一.摘要: 今天在写一个页面,对css中的BFC(块级格式化范围)有了一点体会,今天把遇到的问题和解决方案总结下来,额外还总结一下强大的负外边距的使用心得. 二.总结:

  2. HackerRank "Kundu and Tree" !!

    Learnt from here: http://www.cnblogs.com/lautsie/p/3798165.html Idea is: we union all pure black edg ...

  3. Redis报错：WRONGTYPE Operation against a key holding the wrong kind of value 解决处理

    首先应该明白报这个错误说明了你用的jedis方法与redis服务器中存储数据的类型存在冲突. 例如:数据库中有一个key的数据存储的是Hash类型的,但是你使用jedis执行数据操作的时候却使用了非H ...

  4. android学习笔记34——ClipDrawable资源

    ClipDrawable ClipDrawable代表从其他位图上截取一个“图片片段” 在XML文件中定义ClipDrawable对象使用<clip.../>元素,该元素的语法为: 以上语 ...

  5. Linux下nl命令的用法详解

    Linux中nl命令和cat命令很像,不过nl命令会打上行号,属于比较不常用的命令,下面随小编一起来了解下这个鲜为人知的nl命令吧. nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文 ...

  6. foxmail 6.5升级到7.0版本后，旧邮件的导入处理

    随着foxmail 7.0版的火热升级,部分从foxmial 6.5版升级到7.0版的用户可能会出现旧邮件丢失的困扰.这里,foxmail为大家提供的解决方案如下:   打开Foxmail,点击 文件 ...

  7. 黄聪：使用$.getJSON解决ajax跨域访问 JQuery 的跨域方法(服务器端为wordpress程序)

    客户端: <input id="cat" name="cat" type="hidden" value="<? ech ...

  8. 两分钟彻底让你明白Android Activity生命周期(图文)!

    大家好,今天给大家详解一下Android中Activity的生命周期,我在前面也曾经讲过这方面的内容,但是像网上大多数文章一样,基本都是翻译Android API,过于笼统,相信大家看了,会有一点点的 ...

  9. DBA_Oracle Sort排序处理空间耗用（概念）

    2014-12-18 Created By BaoXinjian

  10. CF 219D Choosing Capital for Treeland 树形DP 好题

    一个国家,有n座城市,编号为1~n,有n-1条有向边 如果不考虑边的有向性,这n个城市刚好构成一棵树 现在国王要在这n个城市中选择一个作为首都 要求:从首都可以到达这个国家的任何一个城市(边是有向的) ...