首页 > 代码库 > 运动的border，仿当当简易效果
运动的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="http://www.mamicode.com/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，仿当当简易效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。