1. [图片] 捕获.jpg


​2. [代码][CSS]代码     
body {
    background: #000;
    overflow-y: scroll;
  }
  .items {
    margin: 40px auto;
    width: 1110px;
  }
  a {
    color: #FFF;
    cursor: pointer;
    margin: 0 0 20px 620px;
    text-align: center;
    text-decoration: none;
  }
  a:HOVER {
    color: red;
  }
  a:HOVER ~ div.items {
    border: 1px solid #FFF;
    background: url('http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg') no-repeat scroll center center transparent;
    height: 500px;
  }
  a:HOVER ~ div.items > *{
    display: none;
  }
  .item {
    border: 10px solid #FFF;
    cursor: pointer;
    float: left;
    height: 231px;
    width: 350px;
     
    -moz-transform: scale(0.8);
    -moz-transition: all 0.5s ease-in-out 0s;
  }
  .item > div {
    background: rgba(0,0,0,0.7);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
     
    -moz-transition: all 0.5s ease-in-out 0s;
  }
  .item:HOVER {
    -moz-transform: scale(1);
  }
  .item-1:HOVER > div {
    height: 0%
  }
  .item-2:HOVER > div {
    height: 0%;
    top: 50%;
  }
  .item-3:HOVER > div {
    height: 0%;
    left: 50%;
    top: 50%;
    width: 0%;
  }
  .item-4:HOVER > div {
    height: 0%;
    left: 50%;
    top: 50%;
    width: 0%;
     
    -moz-transform: rotate(360deg);
  }
  .item-5:HOVER > div {
    height: 0%;
    left: 50%;
    top: 50%;
    width: 0%;
     
    -moz-transform: rotate(-360deg);
  }
  .item-6 > div {
    height: 50%;
    width: 50%;
  }
  .item-6 > div:NTH-CHILD(2) {
    left: 50%;
    top: 0;
  }
  .item-6 > div:NTH-CHILD(3) {
    left: 0;
    top: 50%;
  }
  .item-6 > div:NTH-CHILD(4) {
    left: 50%;
    top: 50%;
  }
  .item-6:HOVER > div {
    height: 0;
    width: 0;
    /*-moz-transform: rotate(-360deg);*/
  }
  .item-6:HOVER > div:NTH-CHILD(2) {
    left: 100%;
    /*-moz-transform: rotate(360deg);*/
  }
  .item-6:HOVER > div:NTH-CHILD(3) {
    top: 100%;
  }
  .item-6:HOVER > div:NTH-CHILD(4) {
    left: 100%;
    top: 100%;
    /*-moz-transform: rotate(360deg);*/
  }
  .clear:AFTER {
    clear: both;
    content: '\0020';
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
  }
  #preloader {
    background-image: url('http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg');
    height: 0;http://www.bizhizu.cn/shouhui/​
    width: 0;
  }
3. [代码][HTML]代码    
<body>手绘图片
  <a class="clear">请不要点我。</a>
  <div class="items clear">
    <div class="item item-1">
      <div></div>
      <img src="350x231/1.jpg" alt="" />
    </div>
    <div class="item item-2">
      <div></div>
      <img src="350x231/2.jpg" alt="" />
    </div>
    <div class="item item-3">
      <div></div>
      <img src="350x231/3.jpg" alt="" />
    </div>
    <div class="item item-4">
      <div></div>
      <img src="350x231/4.jpg" alt="" />
    </div>
    <div class="item item-5">
      <div></div>
      <img src="350x231/5.jpg" alt="" />
    </div>
    <div class="item item-6">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <img src="350x231/6.jpg" alt="" />
    </div>
  </div>
  <div id="preloader"></div>
</body>

HTML： 简单的悬停效果的更多相关文章

  1. MFC 使用位图按钮，并且设置按钮的鼠标悬停效果

    系统环境:Windows 10软件环境:Visual C++ 2013 SP1本次目的:使用位图按钮,并且设置按钮的鼠标悬停效果 在用MFC开发时,界面是比较不好开发的一块.VC中自带了CBitmap ...

  2. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  3. Android ScrollView滚动实现大众点评、网易云音乐评论悬停效果

    今天听着网易云音乐,写着代码,真是爽翻了. http://blog.csdn.net/linshijun33/article/details/47910833 网易云音乐这个产品亮点应该在评论这一模块 ...

  4. 3d分层悬停效果

    3d分层悬停效果 写在前面 经过了2个星期的努力,我回来了!会继续将我学习路上遇到的问题,以及一些笔记,demo分享给大家 实现效果 致我最爱的backpink 实现思路 将6张图片,通过定位叠在一起 ...

  5. jQery简单Tab选项卡效果

    简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  6. 使用CSS实现一个简单的幻灯片效果

    方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html&g ...

  7. Cocos2d-x实现简单的翻牌效果

    触发器互联网影响找了很多.有自己的点重写一个复杂的sprite类来实现.简单的操作来对引擎的使用CCOrbitCamera实现,但是,也存在一些问题,后变反了. 我在用的仅仅是一个简单的翻牌效果,点击 ...

  8. 学习Jammendo代码的心路历程（一）简单的淡出效果实现

    最近在看 Jammendo代码,打算将学习过程简单的记录下来,下面开始第一篇: 打开Jammendo运行之后,出弹出一个对话框,跳过对话框之后,会有一个淡出界面跳转到首页效果的实现.那么这个效果是怎么 ...

  9. 【从无到有】教你使用animation做简单的动画效果

    今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...

随机推荐

  1. 把Execl表格中的数据获取出来保存到数据库中

    比如我们遇到一些需要把execl表格中的数据保存到数据库中,一条一条保存效率底下而且容易出错,数据量少还好,一旦遇到数据量大的时候就会累死个人啊,下面我们就来把execl表格中数据保存到对应的数据库中 ...

  2. 笔记-迎难而上之Java基础进阶5

    Lambda表达式无参数无返回值的练习 //定义一个接口 public interface Cook{ public abstract void makeFood(); } public class ...

  3. MyBatis的一级缓存和二级缓存

    一级缓存 是SqlSession级别的缓存,当使用了clearCache方法和,或者close方法的话,这个缓存失效,如果还有同样的查询,则还会发送一次查询 SqlSession session = ...

  4. Android中的动画总结

    文章主要内容来源<Android开发艺术探索>,部分内容来源网上的文章,文中会有链接. Android系统提供了两个动画框架:属性动画框架和View动画框架. 两个动画框架都是可行的选项, ...

  5. javascript --- 构造器借用

    接下来我们在看一种继承的实现.这需要再次利用构造器函数入手,这回不直接使用对象了.由于在这种继承模式中,子对象构造器可以通过call()和apply()方法来调用父对象的构造器.因而可以被称作构造器盗 ...

  6. javascript对象初探 （五）--- 函数对象的属性

    与其他对象相同的是,函数对象中也有一个叫做constructor的属性,其引用就是Function()这个构造函数. function her(a){ return a; } console.log( ...

  7. Neural Networks and Deep Learning学习笔记ch1 - 神经网络

    近期開始看一些深度学习的资料.想学习一下深度学习的基础知识.找到了一个比較好的tutorial,Neural Networks and Deep Learning,认真看完了之后觉得收获还是非常多的. ...

  8. Codeforces Beta Round #1 A. Theatre Square

    从今天開始.就要在Codeforces里有一个新的開始了,貌似任务非常重的说~~ Codeforces专题我将会记录全部通过的题目,事实上仅仅要通过的题目都是水题啊!. 题目大意: 依照要求计算须要多 ...

  9. android-BroadcastReceive广播接收器

    应用可以使用它对外部事件进行过滤,只对感兴趣的外部事件(如当电话呼入时,或者数据网络可用时)进行接收并做出响应.广播接收器没有用户界面.然而,它们可以启动一个activity或service来响应它们 ...

  10. MyEclipse的实体关系设计

    原文地址:http://www.myeclipsecn.com/learningcenter/database-development/myeclipse-entity-relation-design ...