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. Java出现错误“Invalid escape sequence (valid ones are \b \t \n \f \r \" \' \\ )”的问题分析

    若出现:Invalid escape sequence (valid ones are  \b  \t  \n  \f  \r  \"  \'  \\ )这样的问题,一般是转义字符的问题,下 ...

  2. 【转载】React入门实例教程-读书笔记

    参考了这篇文章: http://www.ruanyifeng.com/blog/2015/03/react.html 其中github 安装配置见上一篇文章(link) 一.HTML 模板 使用 Re ...

  3. 在CentOS 7上构建RAID5、LVM和SAMBAserver(5)——架设SAMBAserver

    在CentOS 7上构建RAID5.LVM和SAMBAserver(5)--架设SAMBAserver 6. 架设SAMBAserver 6.1. 预备 本节的任务是配置SAMBA服务,共享/home ...

  4. 笔记08 WPF导航

    如何在winform中做导航,如何重定向界面,就产生了争执. 是用window还是Page还是UserControl? 先不管用啥.我们先比较一下各自的优缺点. 在WPF中使用导航,内容被组织在Pag ...

  5. 数据库如何让自增id重置

    sql语句:truncate tablename;    会清空表的所有记录,并且使自增的id重置. 另外,navicat的截断表,就是这个功能. 它的清空表只会清空数据,不能使自增的id重置.

  6. 「零秒思考」是个神话，不过这款笔记术你值得拥有zz

    今天读完了赤羽雄二的<零秒思考>,作者是一位在麦肯锡公司工作了 14 年的资深顾问.依照作者的说法,「零秒思考」指的是: 瞬间便能认清现状, 瞬间便能整理问题, 瞬间便能考虑出解决办法, ...

  7. 详谈kubernetes滚动更新-1

    系列目录 这个系列分为两个小节,第一个小节介绍deployment滚动更新时,deployment.replicaset.pod的细节以及创建过程以及deployment版本管理的方式 第二个小节将介 ...

  8. kubernetes高级之创建只读文件系统以及只读asp.net core容器

    系列目录 使用docker创建只读文件系统 容器化部署对应用的运维带来了极大的方便,同时也带来一些新的安全问题需要考虑.比如黑客入侵到容器内,对容器内的系统级别或者应用级别文件进行修改,会造成难以估量 ...

  9. MFC学习之Radio---MFC Radio按钮组的使用例子

    首先我们要完成一个功能,在一个添加新用户的场景里,通过Radio按钮来判断用户选择的是管理员还是普通用户. 要使用Radio组的功能首先我们必须作如下设置: 1.2个Radio按钮的ID号不同,但是他 ...

  10. EasyRTMP手机直播推送rtmp流flash无法正常播放问题

    本文转自EasyDarwin团队Kim的博客:http://blog.csdn.net/jinlong0603/article/details/52960750 问题简介 EasyRTMP是EasyD ...