利用CSS3的transition屬性模仿滑鼠移入閃光燈效果
阿新 • • 發佈：2019-02-02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
padding: 0;
margin: 0;
}
#box {
width: 400px;
height: 400px;
margin: 0 auto;
border:1px solid black;
background: rgba(0,255,0,0.5);
margin-top: 100px;
#box #sgd {
width: 10px;
-webkit-linear-gradient(left,transparent,rgba(255,255,255,0.6),transparent);
/*border:1px solid black;*/
transform: skew(-30deg,0);
position: absolute;
left: -135px;
top:0;
}
#box:hover #sgd{
left:520px; /**滑鼠移入left值變化/
transition: left 0.8s linear ;
}
</style>
</head>
<body>
<div id="box">
<div id="sgd"></div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*清除預設樣式*/
*{padding: 0;
margin: 0;
}
#box {
width: 400px;
height: 400px;
margin: 0 auto;
border:1px solid black;
background: rgba(0,255,0,0.5);
margin-top: 100px;
position: relative;
/*#sgd超出部分隱藏起來*/
overflow: hidden;
}#box #sgd {
width: 10px;
height: 400px;
/*背景色線性漸變*/
background:-webkit-linear-gradient(left,transparent,rgba(255,255,255,0.6),transparent);
/*border:1px solid black;*/
transform: skew(-30deg,0);
position: absolute;
left: -135px;
top:0;
}
#box:hover #sgd{
left:520px; /**滑鼠移入left值變化/
transition: left 0.8s linear ;
}
</style>
</head>
<body>
<div id="box">
<div id="sgd"></div>
</div>
</body>
</html>