css hover背景炫酷點綴
阿新 • • 發佈:2018-12-21
滑鼠懸停時候,一層半透明白色從左往右,效果圖如下:
程式碼如下:
<html>
<head>
<meta content = "text/html,charset=utf-8" >
<style>
html,body{
margin:0px;
padding:0px;
}
.parent{
margin: 0px auto;
height: 200px;
width: 700px;
margin-top: 360px;
position:relative;
background-color:green;
}
.parent:hover:before {
left: 150%;
}
.parent:before {
content: "";
position: absolute;
width: 200px;
height: 100%;
top: 0;
left: -250px;
overflow: hidden;
background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg);
}
</style>
</head>
<body>
<div class = "parent">
</div>
<body>
</html>