<1 小玩意(覆盖效果)
<!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 小玩意(覆盖效果)的更多相关文章
- 简单物联网:外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- -XX:+TraceClassLoading 监控类的加载
-XX:+TraceClassLoading –监控类的加载 •[Loaded java.lang.Object from shared objects file] •[Loaded java.io. ...
- 日常开发使用SVN命令
现在把我日常开发中用到的svn命令总结出来,做个备忘,其实真正用到也就那几个. 如果遇到参数不知道使用或其它困难请使用:svn --help 得到帮助 1)检出: svn co svn地址 本地路径 ...
- 使用Jquery解析Json基础知识
前言 在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换.JSON数据的解析是关键. ...
- Azure Table storage 之改进DynamicTableEntity类为其添加动态语言扩展
在之前的一篇文章中提到,storage类库中包含一个可以用来动态获取Azure table storage 表结构的类-DynamicTableEntity. 我们可以通过这个类,我们无需为每一个表提 ...
- Linux 批量改名之 rename 命令
刚学习到 rename 命令功能很强大,比win 下的 ren 厉害啊 具体看 man rename 语法: rename [ -h|-m|-V ] [ -v ] [ -n ] [ -f ] [ - ...
- 双向循环链表的Java版本实现
1.单项循环列表 单向循环链表是单链表的另一种形式,其结构特点是链表中最后一个结点的指针不再是结束标记,而是指向整个链表的第一个结点,从而使单链表形成一个环.和单链表相比,循环单链表的长处是从链尾到链 ...
- CSS 笔记一(Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width)
Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...
- Dynamics AX 2012 R2 创建一个带有负载均衡的服务器集群
安装额外AOS的主要目的,是将它添加到集群,或用于创建批处理服务器. 1.创建集群服务器 这里,Reinhard使用上节Install An Additional AOS 中创建的AOS,来创建集群. ...
- servlet定义
. 运行在服务器上的java类
- 34、JS/AJAX
1)回顾JS中核心内容 2)了解WEB1.0和WEB2.0时代的技术与特点 3)理解AJAX的产生背景.工作原理与特点 4)掌握AJAX常用API及应用 声明:服务端使用Servlet技术 一 ...