利用transform属性及transition属性写的一个比较简单的光标悬浮效果
以下是完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=div, initial-scale=1.0">
<title>光标悬浮</title>
</head>
<style>
.box {
height: 300px;
width: 300px;
background-color:white;
position: relative;
overflow: hidden;
transition: transform 2s;
margin: 200px;
}
.box:hover {
transform: rotate(360deg);
}
/* 上边框 */
.border_top {
height: 2px;
width: 300px;
background-color:lightslategray;
position: absolute;
left: -300px;
transition: left 2s linear;
}
.box:hover .border_top {
left: 0px;
}
.border_right {
height: 300px;
width: 2px;
background-color: lightslategray;
position: absolute;
right: 0;
top: -300px;
transition: top 2s linear;
}
.box:hover .border_right {
top: 0;
}
.border_bottom {
width: 300px;
height: 2px;
background-color: lightslategray;
right: -300px;
bottom: 0;
transition: right 2s linear;
position: absolute;
}
.box:hover .border_bottom {
right: 0;
}
.border_left {
width: 2px;
height: 300px;
background-color: lightslategray;
position: absolute;
left: 0;
top: 300px;
transition: top 2s linear;
}
.box:hover .border_left {
top: 0;
}
</style>
<body>
<div class="box">
<div class="border_top"></div>
<div class="border_right"></div>
<div class="border_bottom"></div>
<div class="border_left"></div>
</body>
</html>