运动的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事件时候,使用不同倍数的系数,重置布局位置[ ...
随机推荐
- Linux给力的Shell命令
查看目录下面的所有目录 ls /dev/ -F |grep "/" bus/ disk/ input/ 说明: ls -F命令将文件和目录后面添加一个特定的符号; ...
- 2013年各大小IT公司待遇，绝对真实，一线数据！（初版）
本人西电硕士,根据今年找工作的情况以及身边同学的汇总,总结各大公司的待遇如下,吐血奉献给各位学弟学妹,公司比较全,你想去的公司不在这里面,基本上是无名小公司了:无名小公司有时也很给力哦以下绝对是各大公 ...
- Java 处理json字符串value中多余的双引号
转: Java 处理json字符串value中多余的双引号 一.错误场景 json字符串的value值中有多余的双引号 1.直接上错误的json字符串 1 String errorJsonStr = ...
- OSG节点访问和遍历
遍历节点树:osg::Node类中有两个辅助函数: void ascend(NodeVisitor& nv) //虚函数,向上一级节点推进访问器 void traverse(NodeVisit ...
- LeetCode_38. Count and Say
38. Count and Say Easy The count-and-say sequence is the sequence of integers with the first five te ...
- 【leetcode_easy_$】577. Employee Bonus
problem 577. Employee Bonus 参考 1. Leetcode_easy_$_577. Employee Bonus; 2. https://www.cnblogs.com/li ...
- Linux配置代理IP
Linux配置代理IP: vim /etc/profile http_proxy=http://username:password@ip:port/ https_proxy=http://userna ...
- 机器学习笔记——k-近邻算法（一）(摘抄于《机器学习实战》)
k-近邻算法 k-近邻算法(kNN),它的工作原理是:存在一个样本数 据集合,也称作训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一数据 与所属分类的对应关系.输入没有标签的新数据后 ...
- php控制访问人数的方法
php控制访问人数的方法 <pre>//添加访问人数 public function addfangwen() { header("Content-type:text/html; ...
- React native 禁止手势触摸 pointerEvents
碰到一个需求是做个轮播图带自动播放的,UED那边给轮播的底部加了阴影渐变,如下红色区域. 这样会导致一个问题,手触摸在红色区域会被这层View挡住,导致不能手动滑动切换. 原先采取过的方法是在对应的触 ...