运动的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事件时候,使用不同倍数的系数,重置布局位置[ ...
随机推荐
- [Java复习] 缓存Cache part2
7. Redis持久化有哪几种方式?不同的持久化机制都有什么优缺点?持久化机制具体底层是如何实现的? 为什么要持久化? 如果只是存在内存里,如果redis宕机再重启,内存数据就丢失了,所以要用持久化机 ...
- ELK 二进制安装并收集nginx日志
对于日志来说,最常见的需求就是收集.存储.查询.展示,开源社区正好有相对应的开源项目:logstash(收集).elasticsearch(存储+搜索).kibana(展示),我们将这三个组合起来的技 ...
- lvs,nginx,haproxy的优缺点，适合场景
Nginx/LVS/HAProxy的基于Linux的开源免费的负载均衡软件. LVS:使用集群技术和Linux操作系统实现一个高性能.高可用的服务器,它具有很好的可伸缩性.可靠性和可管理性,是一款强大 ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_17-课程预览功能开发-前后端测试
启动前端代码 前端课程找到课程的发布页面 这样就打开了预览页面 结束
- C++11消息队列 + Qt线程池 + QRunnable执行任务简单模型
1.模板类queue,包含头文件<queue>中,是一个FIFO队列. queue.push():在队列尾巴增加数据 queue.pop():移除队列头部数据 queue.font():获 ...
- eclipse spring3.X redis 整合-配置
花了一天时间折腾redis的配置 用到的jar spring 3.1.1 aopalliance-1.0.jar commons-pool2-2.3.jar jedis-2.7.2.jar sprin ...
- 【Leetcode_easy】605. Can Place Flowers
problem 605. Can Place Flowers 题意: solution1: 先通过简单的例子(比如000)发现,通过计算连续0的个数,然后直接算出能放花的个数,就必须要对边界进行处理, ...
- SQLAlchemy相关文档
目录 参考文档 一.执行原生SQL语句 1.实例一 2.实例二 2.实例三 二.ORM操作 1.创建数据库表 (1)创建单表 (2)创建多个表并包含FK.M2M关系 2.操作数据库表 (1)基于sco ...
- python 创建虚拟环境（virtualenv）
原文地址:https://www.jianshu.com/p/2645d8f2e690 另附连接:Linux环境下虚拟环境virtualenv安装和使用 virtualenv 安装 1.Install ...
- golang web框架 beego 学习 （五） 配置文件
app.conf: appname = gowebProject httpport = runmode = dev copyrequestbody = true [db] host= localhos ...