<!--百度新闻同款切换按钮,复刻于2020-06-11-->
<!DOCTYPE html>
<html>
<head>
<style>
body {
line-height: 1.5;
background: #000;
}
/*箭头*/
#forward .arrow {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.arrow {
position: relative;
display: block;
width: 80%;
height: 80%;
margin: 10% 0 0 10%;
}
.arrow::before {
-webkit-transform: translateX(-50%) rotate(30deg);
transform: translateX(-50%) rotate(30deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.arrow::after {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-30deg);
transform: translateX(-50%) rotate(-30deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.arrow::before, .arrow::after {
content: " ";
position: absolute;
left: 25%;
width: 3px;
height: 50%;
background: #fff;
-webkit-transition: -webkit-transform .3s,background-color .3s;
transition: transform .3s,background-color .3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.arrwp:hover .arrow::before {
background: #FF4081;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}
.arrwp:hover .arrow::after {
background: #FF4081;
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) translateY(2%) rotate(-45deg);
}
/*底盘*/
.arrwp {
position: absolute;
top: 130px;
width: 65px;
height: 65px;
}
#forward {
position: absolute;
top: 130px;
right:10px;
width: 65px;
height: 65px;
}
.arrwp::before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 50%;
background: #fff;
-webkit-transition: -webkit-transform .3s,opacity .3s;
transition: transform .3s,opacity .3s;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.arrwp:hover::before {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
</style>
</head>
<body contenteditable='true' >
<a class="arrwp" id="forward" href="javascript:void(0);"><p class="arrow"/></p></a>
<a class="arrwp" id="recess" href="javascript:void(0);"><p class="arrow"/></p></a>
</body>
</html>
不是模仿,是照抄的……
使用效果:
复刻这个的初衷是超强ImageAssitant图片助手的UI设计太不习惯,还是百度大法好啊……