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. SRM1154--Topcoder初体验

    SRM 711 DIV2 <br > 在frank_c1的帮助下,辣鸡Xiejiadong也开始做Topcoder辣...... <br > 这算是一次Topcoder的初体验 ...

  2. springboot快速集成swagger

    今天技术总监说:小明,我们本次3.0改造,使用swagger2.0作为前后端分离的接口规范,它可以一键生成前后端的API,一劳永逸--小明:??? Spring Boot 框架是目前非常流行的微服务框 ...

  3. Maven的构建/测试/打包

    继上一篇http://www.cnblogs.com/EasonJim/p/6809882.html使用Maven创建工程后,接下来是使用Maven进行构建/测试/打包. 在打包之前,先熟悉一下Mav ...

  4. python--文件处理1

    1.     读取文件 方法: all_the_text = open('thefile.txt').read() 但是为了安全起见还是给打开的文件对象指定一个名字,这样在完成之后可以迅速关掉,防止无 ...

  5. 兔子-svnserver，client搭建

    http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html

  6. vs2010音频文件压缩 调用lame_enc.dll将WAV格式转换成MP3

    /* //My_lame.h */ #pragma once#include "stdafx.h"#include <windows.h>#include <st ...

  7. px rem css 转换工具

    http://520ued.com/tools/rem mark 一下 貌似还挺好用

  8. caffe学习--caffe入门classification00学习--ipython

    首先,数据文件和模型文件都已经下载并处理好,不提. cd   "caffe-root-dir " ----------------------------------分割线---- ...

  9. mac下执行文件出现Permission Denied的解决

    mac 下终端访问文件出现“Permission Denied”解决方案: 一个文件有3种权限,读.写.可执行,你这个文件没有可执行权限,需要加上可执行权限. 1. 终端下先 cd到该文件的目录下 2 ...

  10. h5页面测试

    转自:http://www.blogjava.net/qileilove/archive/2014/07/24/416154.html?utm_source=tuicool&utm_mediu ...