运动的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事件时候,使用不同倍数的系数,重置布局位置[ ...
随机推荐
- Jmeter BeanShell 引用变量报错Error or number too big for integer
如果你通过CSV Data Set Config或者_StringFromFile函数来参数化你的请求,需要特别注意当参数为纯数字时,jmeter会默认将其识别成int型数据,说明jmeter并不是默 ...
- python使用redis实现协同控制的分布式锁
python使用redis实现协同控制的分布式锁 上午的时候,有个腾讯的朋友问我,关于用zookeeper分布式锁的设计,他的需求其实很简单,就是节点之间的协同合作. 我以前用redis写过一个网络锁 ...
- QML访问C++类内部
0.前提 C++类需要继承QObject,且有Q_OBJECT宏[所以QT自己的那么多类按道理上QML都是可以直接访问的,nb] 1.QML访问C++中的非private槽函数 可直接调用 信号也是 ...
- Qt编写自定义控件54-时钟仪表盘
一.前言 这个控件没有太多的应用场景,主要就是练手,论美观的话比不上之前发过的一个图片时钟控件,所以此控件也是作为一个基础的绘制demo出现在Qt源码中,我们可以在Qt的安装目录下找到一个时钟控件的绘 ...
- Python 练习题总结(待续)
1.编写一个函数,接受一个参数n,n为正整数,左右两种打印方 式.要求数字必须对齐 正三角 倒三角 实现思路: 思路1.一行一行打印,前面追加空格,每一个空格的宽度等于数字字符串的宽度 #正三角打印d ...
- 【ARTS】01_35_左耳听风-201900708~201900714
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- eclipse 解决POM文件错误：org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project.MavenProject, org.apache.maven.archiver.MavenArchiveConfiguration)
解决方案: 更新eclipse中的maven插件 1.1 Help -> Install New Software -> Add 1.2 Location中输入 http://repo1. ...
- 遵循统一的机器学习框架理解SVM
遵循统一的机器学习框架理解SVM 一.前言 我的博客仅记录我的观点和思考过程.欢迎大家指出我思考的盲点,更希望大家能有自己的理解. 本文参考了李宏毅教授讲解SVM的课程和李航大大的统计学习方法. 二. ...
- vue element-ui typescript tree报错 === Property 'getCheckedNodes' does not exist on type 'Element | Element[] | Vue | Vue[]'.
import { Tree } from 'element-ui' const ref = <Tree>this.$refs.tree ref.getCheckedNodes()
- AirFlow后台运行调度程序
nohup airflow worker>>$AIRFLOW_HOME/airflow-worker.log >& & nohup airflow scheduler ...