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. 2017 [六省联考] T2 相逢是问候

    4869: [Shoi2017]相逢是问候 Time Limit: 40 Sec  Memory Limit: 512 MBSubmit: 1205  Solved: 409[Submit][Stat ...

  2. [HEOI2015]定价

    题目描述 在市场上有很多商品的定价类似于 999 元.4999 元.8999 元这样.它们和 1000 元.5000 元和 9000 元并没有什么本质区别,但是在心理学上会让人感觉便宜很多,因此也是商 ...

  3. HTML5 Canvas实现360度全景图

    原文:http://blog.csdn.net/jia20003/article/details/17172571 很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买 ...

  4. android特效集合

    https://github.com/Trinea/android-open-project http://www.cnblogs.com/hawkon/p/3593709.html http://i ...

  5. 转： WebRTC音视频引擎研究(1)--整体架构分析

    转自: http://blog.csdn.net/temotemo/article/details/7530504   目录(?)[+]   WebRTC技术交流群:234795279 原文地址:ht ...

  6. live555client连多路1080P视频流花屏问题

    硬件和软件环境是这种: DM8168 + linux. 解码器是DM8168自带的 视频来源: ipc通过live555做的的rtsp sever发送过来的 其它測试: 通过VLC在pc连4路1080 ...

  7. npm 安装包无法继续下载？ 卡住

    一般是由于package.json配置的项目名不对

  8. Cts框架解析(15)-任务运行完

    case运行完成后.会回到CtsTest的run方法中: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRmb290YmFsbA==/font/5a6L ...

  9. C++错误——”无法启动程序”…\xxx.exe” 系统找不到指定的文件”

    背景 在VS2010环境下,升级了一个用C++编写的程序,编译生成成功,但是,不能在VS中直接运行(可以通过打开debug文件目录的exe应用程序运行),提示以下错误:”无法启动程序”…\xxx.ex ...

  10. MQTT 测试工具介绍

    eclipse paho 下载地址为: https://repo.eclipse.org/content/repositories/paho-releases/org/eclipse/paho/org ...