<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
width: 200px;
height: 200px;
border: 1px solid #ccc;
background-color: darkorange;
position: absolute;
top: 500px;
left: 30px;
}
.div2 {
position: relative;
height: 1px;
background-color: #ddd;
margin: 20px auto;
width: 1200px;
cursor: pointer;
}
.div2 i {
position: absolute;
top: 0;
right: 0px;
width: 300px;
height: 1px;
background-color: red;
}
.div3 {
width: 200px;
height: 300px;
background: #ccc;
position: relative;
margin: 30px auto;
cursor: pointer;
}
.div3 i {
width: 30px;
height: 538px;
position: absolute;
top: 46px;
left: 10px;
/*background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(255, 255, 255, 0)));*/
background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
transform:rotate(60deg) translate(-300px,-30px);
transition:all 0.6s linear 0s;
/* animation-fill-mode:forwards;*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"><i></i></div>
<div class="div3"><i></i></div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script>
$(".div2").on("mouseover", function () {
$(".div2 i").css("left", 0);
$(".div2 i").animate({left: "900px"}, 500)
});
$(".div3").hover(function(){
$(this).find("i").css("display","block");
$(this).find("i").animate({top:"452px",left:"252px"})
},function(){
$(this).find("i").css({display:"none",top:"46px",left:"10px"})
})
</script>
</body>
</html>
