1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8" />
  5. <style>
  6. .show1{ animation:show1 0.25s linear;animation-fill-mode: forwards;}
  7. .show2{ animation:show2 0.25s linear 0.25s;animation-fill-mode: forwards;}
  8. .show3{ animation:show3 0.25s linear;animation-fill-mode: forwards;}
  9. .show4{ animation:show4 0.25s linear 0.25s;animation-fill-mode: forwards;}
  10. @keyframes show1{
  11. 0%{ width:0; height:2px; background-color:red}
  12. 100%{ width:150px; height:2px; background-color:red}
  13. }
  14. @keyframes show2{
  15. 0%{ width:2px; height:0; background-color:red}
  16. 100%{ width:2px; height:148px; background-color:red}
  17. }
  18. @keyframes show3{
  19. 0%{ width:2px; height:0; background-color:red}
  20. 100%{ width:2px; height:148px; background-color:red}
  21. }
  22. @keyframes show4{
  23. 0%{ width:0; height:2px; background-color:red}
  24. 100%{ width:148px; height:2px; background-color:red}
  25. }
  26. </style>
  27. <script src="jquery.js"></script>
  28. </head>
  29. <body>
  30. <div style=" background-color:#CCC; width:150px; height:150px; margin:200px 0 0 200px; position:relative" id="f">
  31. <div id="child1"></div>
  32. <div id="child2" style=" position:absolute;left:148px;"></div>
  33. <div id="child3"></div>
  34. <div id="child4" style=" position:absolute;top:148px"></div>
  35. </div>
  36. </body>
  37. <script>
  38. $("#f").mouseover(function(){
  39. $("#child1").addClass("show1");
  40. $("#child2").addClass("show2");
  41. $("#child3").addClass("show3");
  42. $("#child4").addClass("show4");
  43. })
  44. $("#f").mouseout(function(){
  45. $("#child1").removeClass("show1");
  46. $("#child2").removeClass("show2");
  47. $("#child3").removeClass("show3");
  48. $("#child4").removeClass("show4");
  49. })
  50. </script>
  51. </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. SQL复制一个表的数据到另一个表

    最近做一个项目,由于客户数据量大,为了不将数据彻底删除,于是将数据移动到历史表,原始表的数据删除.由于技术有限,想不到好的方法,于是写个存储过程 执行,为了防止执行过程中出现异常,执行不完整.用到hI ...

  2. oracle表的操作简述

    单表的操作!(代码完全可以用手工代替,写下来为了记忆)1.建立表create table HKB_TABLE_MODIFY(  NAME VARCHAR2(6),  AGE  VARCHAR2(3), ...

  3. C# 参数化SQL语句中的like和in

    在写项目的时候遇到一个问题,sql 语句进行 like in 参数化,按照正常的方式是无法实现的我们一般的思维是: Like 参数:string strSql = "select * fro ...

  4. VS2010中qDebug输出乱码的问题

    1.开发环境:安装Qt5.3.2(离线安装包安装):VS版本为:2010 SP1Rel:源代码默认保存格式为GB2312. 2.输出乱码的代码 #include <QtCore/QCoreApp ...

  5. 将java项目转换成Web项目

    http://www.cnblogs.com/kaige123/p/5866446.html 在项目上点击右键,进入Properties配置,点击Project Facets,再点击Convert t ...

  6. php计算两个日期相差 年 月 日

    在PHP程序中,很多时候都会遇到处理时间的问题,比如:判断用户在线了多长时间,共登录了多少天,两个帖子发布的时间差或者是不同操作之间的日志记录等等.在文章中,简单地举例介绍了PHP中如何计算两个日期相 ...

  7. android之电话拨号器

    在android入门的案例中,除了HelloWorld这个经典案例,还有一个电话拨号器需要掌握,现在我就来个电话拨号器的示范,毕竟大牛也是从菜鸟进化而来的. 首先你应该知道自己要设置怎样的UI,然后创 ...

  8. 【Spring】利用Spring最简单地使用异步方法

    有时候我们想异步地调用某个方法. 比如这个场景:在业务处理完毕后,需给用户发送通知邮件.由于邮件发送需调用邮箱服务商,有可能发生阻塞,我们就可以异步调用.当然有个前提,即如果邮件发送失败,不需要提示用 ...

  9. Json概述以及python对json的相关操作(转)

    什么是json: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...

  10. 关于 Oracle 的数据导入导出及 Sql Loader (sqlldr) 的用法

    在 Oracle 数据库中,我们通常在不同数据库的表间记录进行复制或迁移时会用以下几种方法: 1. A 表的记录导出为一条条分号隔开的 insert 语句,然后执行插入到 B 表中2. 建立数据库间的 ...