您的位置：首页 > Web前端 > CSS

利用CSS3的transition属性模仿鼠标移入闪光灯效果

2018-01-04 21:27 253 查看

<!DOCTYPE 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 前端

相关文章推荐

新的分享

章节导航