运动的border，仿当当简易效果
突然想到以前看到当当上有个效果，当鼠标移上去，图片边框是运动添加上的，还以为是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，仿当当简易效果的更多相关文章
- PHP实现仿Google分页效果的分页函数
本文实例讲述了PHP实现仿Google分页效果的分页函数.分享给大家供大家参考.具体如下: /** * 分页函数 * @param int $total 总页数 * @param int $pages ...
- Android仿IOS回弹效果 ScrollView回弹 总结
Android仿IOS回弹效果 ScrollView回弹 总结 应项目中的需求 须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些 发现总 ...
- 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果
wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...
- EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象
EF+LINQ事物处理 在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...
- jquery 仿windows10菜单效果下载
http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载
- iOS仿支付宝首页效果
代码地址如下:http://www.demodashi.com/demo/12776.html 首先看一下效果 状态栏红色是因为使用手机录屏的原因. 1.问题分析 1.导航栏A有两组控件,随着tabl ...
- 用JqueryUI的Dialog+IFrame实现仿模态窗口效果
大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示 ...
- 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...
- android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片，上拉回弹 上拉滚动顶部title 颜色渐变
首先要知道 自定义scrollview 仿QQ效果 下拉伸缩放大顶部图片 的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[ ...
随机推荐
- osg ifc数据渲染着色器
//顶点着色器 static const char* vertShader = { "varying vec4 color;\n" "void main(void)\n& ...
- PAT 甲级 1052 Linked List Sorting (25 分)（数组模拟链表，没注意到不一定所有节点都在链表里）
1052 Linked List Sorting (25 分) A linked list consists of a series of structures, which are not ne ...
- Golang 开发框架 gin 项目时笔记
1.模板引入时报错: func main() { router := gin.Default() router.LoadHTMLGlob("templates/**/*") rou ...
- 项目中学习ReactiveCocoa的使用方法
一.注册控制器 控制器上的一个属性 @property (weak, nonatomic) IBOutlet UIBarButtonItem *signInBtn; 在 viewDidLoad 方法中 ...
- Core Data 的使用
一.概念 1.Core Data 是数据持久化存储的最佳方式 2.数据最终的存储类型可以是:SQLite数据库,XML,二进制,内存里,或自定义数据类型 在Mac OS X 10.5Leopard及以 ...
- jsPlumb 基本概念
jsPlumb 基本概念 一.默认属性 Anchor:锚点(连接点位置),可以设置在任何没有锚点的目标上(endPoint) Anchors:设置在connect的源和目标点的连接点位置,默认是 Bo ...
- [转载]DriverStore文件夹特别大，能删除吗？
[转载]DriverStore文件夹特别大,能删除吗? 转自博客园https://www.cnblogs.com/lovebing/p/6951833.html 这篇文章,清理完C盘多了20G!不要太 ...
- 【CUDA开发】CUDA编程接口（一）------一十八般武器
子曰:工欲善其事,必先利其器.我们要把显卡作为通用并行处理器来做并行算法处理,就得知道CUDA给我提供了什么样的接口,就得了解CUDA作为通用高性能计算平台上的一十八般武器.(如果你想自己开发驱动,自 ...
- VMware安装windows2003
一.安装vm 这一项大家应该都会,网上也有很多教程. 二.搭建Windows server 2003 1.镜像下载- 2.虚拟机安装 首先是新建虚拟机,我选的是自定义,也可以选典型 第一步默认下一步, ...
- 『Python基础』第4节：基础数据类型初识
本节只是对基础数据类型做个简单介绍, 详情会在之后慢慢介绍 什么是数据类型? 我们人类可以分清数字与字符串的区别, 可是计算机不能. 虽然计算机很强大, 但在某种程度上又很傻, 除非你明确告诉它数字与 ...