突然想到以前看到当当上有个效果，当鼠标移上去，图片边框是运动添加上的，还以为是css3或者是canvas做的呢，做完幽灵按钮后，才知道，so  easy,只不过是animate+position的杰作。附上代码

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{margin: 0;padding: 0}

div.child{

	position: relative;

	margin: 100px auto;

	width: 200px;

	height: 200px;

	border: 2px solid #bbb;

	box-sizing:border-box;

	-webkit-box-sizing:border-box;

	background: #ccc;

}

.line{

	position: absolute;

	display: block;

	width: 0;

	height: 0;

	background: red;

}

.line-top{

	/*width: 200px;

	height: 2px;*/

	left: -2px;

	top: -2px;

}

.line-right{

	/*width: 2px;

	height: 200px;*/

	right: -2px;

	top: -2px;

}

.line-bottom{

	/*width: 200px;

	height: 2px;*/

	right: -2px;

	bottom: -2px;

}

.line-left{

	/*width: 2px;

	height: 200px;*/

	left: -2px;

	bottom: -2px;

}

</style>

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

<script>

$(function(){

	$('.child').hover(function(){

		$('.line-top').animate({

			width: '200px',

			height: '2px'

		},1000);

		$('.line-right').animate({

			width: '2px',

			height: '200px'

		},1000);

		$('.line-bottom').animate({

			width: '200px',

			height: '2px'

		},1000);

		$('.line-left').animate({

			width: '2px',

			height: '200px'

		},1000);

	},function(){

		$('.line').animate({

			width: '0px',

			height: '0px'

		},1000);

	});

});

</script>

</head>

<body>

<div class="child">

	<span class="line line-top"></span>

	<span class="line line-right"></span>

	<span class="line line-bottom"></span>

	<span class="line line-left"></span>

</div>

</body>

</html>

　　当然，其他的你想要的样式，不妨举一反三做一下，也很简单，只是个运动而已

运动的border，仿当当简易效果的更多相关文章

  1. PHP实现仿Google分页效果的分页函数

    本文实例讲述了PHP实现仿Google分页效果的分页函数.分享给大家供大家参考.具体如下: /** * 分页函数 * @param int $total 总页数 * @param int $pages ...

  2. Android仿IOS回弹效果 ScrollView回弹 总结

    Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些  发现总 ...

  3. 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果

    wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...

  4. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  5. jquery 仿windows10菜单效果下载

    http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载

  6. iOS仿支付宝首页效果

    代码地址如下:http://www.demodashi.com/demo/12776.html 首先看一下效果 状态栏红色是因为使用手机录屏的原因. 1.问题分析 1.导航栏A有两组控件,随着tabl ...

  7. 用JqueryUI的Dialog+IFrame实现仿模态窗口效果

    大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示 ...

  8. 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

    实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  9. android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片，上拉回弹 上拉滚动顶部title 颜色渐变

    首先要知道  自定义scrollview 仿QQ效果 下拉伸缩放大顶部图片 的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[ ...

随机推荐

  1. 013-多线程-基础-Fork/Join框架、parallelStream讲解

    一.概述 Fork/Join框架是Java7提供了的一个用于并行执行任务的框架, 是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架. 它同ThreadPoolExecut ...

  2. spring boot配置文件、日志配置和代码的多环境配置

    一般项目都逃不掉开发.测试和生产这三套环境,如果每次给这三套环境打包都去改配置,累死不说,还一不留心就出差错.倒不如每套环境各给一套配置来的轻松.上代码: 1.通用配置放在application.pr ...

  3. Python - Django - 删除作者

    修改 author_list.html,添加删除按钮 <!DOCTYPE html> <html lang="en"> <head> <m ...

  4. python使用datetime模块计算各种时间间隔的方法

    python使用datetime模块计算各种时间间隔的方法 本文实例讲述了python使用datetime模块计算各种时间间隔的方法.分享给大家供大家参考.具体分析如下: python中通过datet ...

  5. 设置滑动TabBar的显示和隐藏

    代码如下: //设置滑动的判定范围 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint ...

  6. 【c# 学习笔记】类与结构体的区别

    由于类与结构体在语法和使用上都非常类似,导致我们这些初学者容易混淆.为更好理解,特做以下区分记录: ① 语法上的区别在于,定义类要使用关键词class,而定义结构体则使用关键词struct. ② 结构 ...

  7. (CVE-2017-8464）LNK文件远程代码执行

    漏洞详细 北京时间2017年6月13日凌晨,微软官方发布6月安全补丁程序,“震网三代” LNK文件远程代码执行漏洞(CVE-2017-8464)和Windows搜索远程命令执行漏洞(CVE-2017- ...

  8. 云计算服务模式(SaaS/PaaS/IaaS)

    为什么是云计算,为什么是现在 商用云:商用云的设计初衷是将基础设施商品化,并以较低的成本对外提供,是用户能够获得高扩展性和自服务能力. 企业云:企业级云的目的,则是达到或超过它所要替代的本地基础设施的 ...

  9. 【计算机视觉】Selective Search for Object Recognition论文阅读1

    Selective Search for Object Recognition 作者: J. R. R. Uijlings, K. E. A. van de Sande, T. Gevers, A. ...

  10. mysql学习之join从句

    一.join从句共有5种类型 内连接(inner join) 全外连接(full outer join) 左外连接(left outer join) 右外连接(right outer join) 交叉 ...