运动的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事件时候,使用不同倍数的系数,重置布局位置[ ...
随机推荐
- nginx在windows系统中如何启动、重启、停止
nginx在windows系统中如何启动.重启.停止 查看nginx的版本号:nginx -v 启动nginx:start nginx 快速停止或关闭nginx:nginx -s stop 正常停 ...
- List根据多个字段分组
List<ClassEntity> distinctClass = classEntities.stream().collect(Collectors.collectingAndThen( ...
- 普罗米修斯Prometheus监控安装
普罗米修斯Prometheus监控安装 架构: 服务端:192.168.0.204 客户端:192.168.0.206 环境准备:所有节点安装go 语言环境 rz go1.12.linux-amd64 ...
- jQuery BlockUI Plugin Demo 5（Simple Modal Dialog Example）
Simple Modal Dialog Example This page demonstrates how to display a simple modal dialog. The button ...
- spring mvc 后端获得前端传递过来的参数的方法
1.通过HttpServletRequest 获得 HttpServletRequest.getParameter(参数名),可以获得form表单中传递的参数,或ajax或url中传递过来的参数,如果 ...
- Python sys.path永久添加
在用户目录下,找到隐藏文件.bashrc 或 .zshrc 文件然后在末尾添加 export PYTHONPATH=$PYTHONPATH:/home/dev/custom_path 操作:vim . ...
- CF C.Ivan the Fool and the Probability Theory【思维·构造】
题目传送门 题目大意: 一个$n*m$的网格图,每个格子可以染黑色.白色,问每个格子最多有一个相邻格子颜色相同的涂色方案数$n,m<=1e5$ 分析: 首先,考虑到如果有两个相邻的格子颜色相同, ...
- 猴子补丁(Monkey Patching)
猴子补丁是我在面试的时候接触的一到题,学python的时候,我根本就没有听说这个概念!那接下来我们来分析一下: 1.什么是猴子补丁? 2.猴子补丁的功能? 3.猴子补丁的应用场景? 一.什么是猴子补丁 ...
- Python senium 中页面属性
1.通过id定位元素2.通过class_name定位元素3.通过tag_name定位元素4.通过name定位元素5.通过link文字精确定位元素6.通过link文字模糊定位元素7.通过CSS定位元素8 ...
- 笔记-8：使用turtle库进行图形绘制
1.窗体函数 turtle.setup(width,height,startx,starty) 作用:设置窗体的大小和位置 width:窗口宽度,如果值是整数,表示像素值:如果值是小数,表示窗口宽度与 ...