一、实现自身转动180°
【代码】
<!DOCTYPE html> <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>箭头自动变化 - CSDN - 南方者</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; /*覆盖并错开1px*/ border-bottom: 10px #fff solid; } .closeBox { display: inline-block; width: 20px; height: 30px; transition: transform 0.5s; -moz-transition: -moz-transform 0.5s; /* Firefox 4 */ -webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */ -o-transition: -o-transform 0.5s; } .closeBox img { width: 100%; } .closeBox:hover { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } </style> </html>
【效果展示】
【笔者有话说】：如果需要有别的样式，可以留下你的需求，尽我所能。
