参考https://www.html5tricks.com/tag/loading%E5%8A%A8%E7%94%BB/
css左右、关闭按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
/* 左右按钮 */
#prev,#next {opacity: .25;transition: all .3s;cursor: pointer;position: absolute;top: 50%;left: 20px; 100px;height: 100px;margin-top: -50px;z-index: 13;transition: all .3s;}
#prev:hover,#next:hover {opacity: 1;}
#next {right: 20px;left: auto;}
#prev i,#next i {position: absolute;top: 0;left: 0; 50px;height: 50px;}
#next i {top: 50px;left: auto; 50px;right: 0;}
#prev i::after,#prev i::before {content: "";position: absolute;height: 0%;left: 0;top: 50px; 50px;height: 1px;background: red;transition: all .3s}
#prev i::before {transform: rotate(45deg) translate(50%, 50%);}
#prev i::after {transform: rotate(135deg) translate(-50%, -50%);}
#prev:hover i::before {transform: rotate(50deg) translate(50%, 50%);}
#prev:hover i::after {transform: rotate(130deg) translate(-50%, -50%);}
#next i::after,#next i::before {content: "";position: absolute;height: 0%;left: 0;top: 0; 50px;height: 1px;background:red;transition: all .3s}
#next i::before {transform: rotate(225deg) translate(50%, 50%);}
#next i::after {transform: rotate(315deg) translate(-50%, -50%);}
#next:hover i::before {transform: rotate(230deg) translate(50%, 50%);}
#next:hover i::after {transform: rotate(310deg) translate(-50%, -50%);}
/* 关闭1黑色id="close" */
#close {opacity: .25;transition: all .3s;cursor: pointer;position: absolute;left: 20px; 50px;z-index: 13;transition: all .3s;}
#close:hover {opacity: 1;}
#close {left: 10px;top: 70px;}
#close i {position: absolute;top: 0;left: 0; 50px;height: 50px;}
#close i {top: 25px;left: auto; 50px;right: 0;}
#close i::after,#close i::before {content: "";position: absolute;height: 0%;left: 0;top: 0; 50px;height: 1px;background: red;transition: all .3s}
#close i::before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
#close i::after {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
#close:hover i::before {-webkit-transform: rotate(40deg);-moz-transform: rotate(40deg);-ms-transform: rotate(40deg);-o-transform: rotate(40deg);transform: rotate(40deg);}
#close:hover i::after {-webkit-transform: rotate(-40deg);-moz-transform: rotate(-40deg);-ms-transform: rotate(-40deg);-o-transform: rotate(-40deg);transform: rotate(-40deg);}
/* 关闭2红色class="close" */
.close {opacity: .25;cursor: pointer; 100px;height: 100px;z-index: 13;transition: all .3s;}
.close:hover {opacity: 1;}
.close {right: 600px;left: auto;}
.icon-cross {position: relative;display: inline-block; 50px;height: 50px;overflow: hidden;}
.icon-cross:hover::before {background: #1ebcc5;transform: rotate(35deg);}
.icon-cross:hover::after {background: #1ebcc5;transform: rotate(-35deg);}
.icon-cross::before,.icon-cross::after {content: '';position: absolute;height: 1px; 100%;top: 50%;left: 0;/* margin-top: -1px; */background: #000;transition: all .3s;}
.icon-cross::before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
.icon-cross::after {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
.icon-cross::before,.icon-cross::after {height: 1px;}
</style>
<body>
<div id="next"><i></i></div>
<div id="prev"><i></i></div>
<div id="close"><i></i></div>
<div class=""><span class="icon-cross"></span></div>
</body>
</html>