效果圖
方法一:使用轉換中的傾斜轉換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.box{
width: 300px; height: 260px;
margin: 100px auto; border-radius: 10px;
box-shadow: 0 0 3px #ccc; overflow: hidden;
position: relative;
}
.box img{
width: 300px; height: 230px;
}
.box span{
display: block; line-height: 30px; padding-left: 10px;
transition: transform 1s;
}
.box .sgt{
width: 30px; height: 260px;
position: absolute; top: 0; left: -110px;
background-color: white; opacity: 0.3;
transform: skewX(-30deg);
transition: left 0.5s;
}
.box:hover span{
transform: translateX(100px);
color: rgb(47, 118, 211);
}
.box:hover .sgt{
left: 380px;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/img215.jpg" alt="">
<span>文字移動</span>
<div class="sgt"></div>
</div>
</body>
</html>
方法二:使用動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.box{
width: 300px; height: 260px;
margin: 100px auto; border-radius: 10px;
box-shadow: 0 0 3px #ccc; overflow: hidden;
position: relative;
}
.box img{
width: 300px; height: 230px;
}
.box span{
display: block; line-height: 30px; padding-left: 10px;
transition: transform 1s;
}
.box .sgt{
width: 30px; height: 260px;
position: absolute; top: 0; left: -110px;
background-color: white; opacity: 0.3;
transform: skewX(-30deg);
}
.box:hover span{
transform: translateX(100px);
color: rgb(47, 118, 211);
}
.box:hover .sgt{
animation: sgt 500ms;
}
@keyframes sgt{
0%{left: -110px;}
100%{left: 380px;}
}
</style>
</head>
<body>
<div class="box">
<img src="../img/img215.jpg" alt="">
<span>文字移動</span>
<div class="sgt"></div>
</div>
</body>
</html>