【 Reference 】 :
www.divcss5.com/rumen/r5084…
www.cnblogs.com/daisyyuan/p…
First, to achieve their own rotation of 180°
[code]
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Arrows automatically change - CSDN - South</title>
</head>
<body>
<i class="top closeBox"></i>
</body>
<style>
.top {
position: absolute;
}
.top:before,
.top:after {
position: absolute;
content: ' ';
border-top: 10px transparent dashed;
border-left: 10px transparent dashed;
border-right: 10px transparent dashed;
border-bottom: 10px #fff solid;
}
.top:before {
border-bottom: 10px #0099CC solid;
}
.top:after {
top: 3px;
/* Overwrite and stagger 1px*/
border-bottom: 10px #fff solid;
}
.closeBox {
display: inline-block;
width: 20px;
height: 30px;
transition: transform 0.5 s;
-moz-transition: -moz-transform 0.5 s;
/* Firefox 4 */
-webkit-transition: -webkit-transform 0.5 s;
/* Safari and Chrome */
-o-transition: -o-transform 0.5 s;
}
.closeBox img {
width: 100%;
}
.closeBox:hover {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
</style>
</html>
Copy the code[Effect Display]
[The author has a word] : If there is a need for other styles, you can leave your requirements, I do my best.