<!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8" />

     <style>

     .show1{ animation:show1 0.25s linear;animation-fill-mode: forwards;}

     .show2{ animation:show2 0.25s linear 0.25s;animation-fill-mode: forwards;}

     .show3{ animation:show3 0.25s linear;animation-fill-mode: forwards;}

     .show4{ animation:show4 0.25s linear 0.25s;animation-fill-mode: forwards;}

     @keyframes show1{

         0%{ width:0; height:2px; background-color:red}

         100%{ width:150px; height:2px; background-color:red}

         }

     @keyframes show2{

         0%{ width:2px; height:0; background-color:red}

         100%{ width:2px; height:148px; background-color:red}

         }

     @keyframes show3{

         0%{ width:2px; height:0; background-color:red}

         100%{ width:2px; height:148px; background-color:red}

         }

     @keyframes show4{

         0%{ width:0; height:2px; background-color:red}

         100%{ width:148px; height:2px; background-color:red}

         }

     </style>

 <script src="jquery.js"></script>

 </head>

 <body>

 <div style=" background-color:#CCC; width:150px; height:150px; margin:200px 0 0 200px; position:relative" id="f">

     <div id="child1"></div>

     <div id="child2" style=" position:absolute;left:148px;"></div>

     <div id="child3"></div>

     <div id="child4" style=" position:absolute;top:148px"></div>

 </div>

 </body>

 <script>

 $("#f").mouseover(function(){

     $("#child1").addClass("show1");

     $("#child2").addClass("show2");

     $("#child3").addClass("show3");

     $("#child4").addClass("show4");

     })

 $("#f").mouseout(function(){

     $("#child1").removeClass("show1");

     $("#child2").removeClass("show2");

     $("#child3").removeClass("show3");

     $("#child4").removeClass("show4");

     })

 </script>

 </html>

<1 小玩意(覆盖效果)的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Bug测试报告--在线考试系统--金州勇士

    项目名:在线考试系统 组名:金州勇士 测试者:宫丽君(nice!团队) 代码地址: ssh:git@git.coding.net:handsomeman/examm.git     https://g ...

  2. 十八、Java基础--------IO流体系以及字符流

    在上一章节中详细介绍集合框架的相关知识,在接下来的几篇文章中将讲述Java中另一个及其重要的知识——IO流,本文主要是讲述IO流的一些基本概念以及字符流的相关应用. IO流 介绍IO流之前先介绍一下什 ...

  3. innodb必收藏

    http://www.xaprb.com/blog/2015/08/08/innodb-book-outline/

  4. TI CC2541的红外控制

    整整一个礼拜, 整了...大约40个小时吧, 最少.. 下面是结果, 只能做一个delay延时.: unsigned char Time;unsigned char IrValue[6];#pragm ...

  5. Css Study - 纵向Menu - By html and Css

    http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS HTML <div id="leftmenu"&g ...

  6. Uva 11090 在环中

    题目链接:http://vjudge.net/contest/143318#problem/A 题意: 求平均权值最小的回路. 分析: 平均权值不可能超过最大边,二分查,然后,由于是平均权值,就可以转 ...

  7. android 常见的泄漏内存方法和 leakcanary 使用方法

    虽然VM接管了内存分配和回收,但是人类在解决问题的同时也会重新创造出一些新的问题,所以问题永远都解决不了,就产生各种稀奇古怪的就业机会了(跑题跑不停). 无论各种VM用什么算法管理内存, 造成内存泄漏 ...

  8. 【小白入门向】tarjan算法+codevs1332上白泽慧音 题解报告

    一.[前言]关于tarjan tarjan算法是由Robert Tarjan提出的求解有向图强连通分量的算法. 那么问题来了找蓝翔!(划掉)什么是强连通分量? 我们定义:如果两个顶点互相连通(即存在A ...

  9. parseInt的源码阅读

    parseInt的源码阅读 Integer.parseInt()这个方法的功能小巧又实用,实现起来困难不大,没有很复杂.这里就来看一下Java的源码是怎么写的吧,走一边大婶写过的代码,应该会有点收获吧 ...

  10. Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’解决方法 + Linux启动/停止/重启Mysql数据库的方法

    启动mysql 报错: ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var/lib/mysql/m ...