【实用向】【css大王】魔改百度新闻轮播图的左右切换按钮为上下切换按钮之前“实现”了百度新闻同款悬浮变形的左右切换按钮，

之前“实现”了百度新闻同款悬浮变形的左右切换按钮，其实就是照抄浏览器解析出来的相关的css样式。这是一对按钮，左右分布，平时不显，低调做人，简约端庄。一旦鼠标指针悬浮于上，箭头就会用一个动效的时间，渐渐地变得更加明显。

这次，需要的是上下切换按钮，于是想起了去年的这点经验，直接拿来改就是了。

这个箭头形状是用伪元素实现的，before、after分别像时钟的指针一样形成了箭头的两条线段。

.arrow::before {
	transform: translateX(-50%) rotate(30deg); /*  一个转30° */
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.arrow::after {
	top: 50%;
	transform: translateX(-50%) rotate(-30deg);/*  另一个转-30° */
	-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;
}

那就很简单了，改改角度应该就可以了吧。但想着简单，还是要花一点时间的。

完成！

<!--上下切换按钮，魔改于2022年1月26日-->
<!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 {
			transform: translateX(-50%) translateY(-2%) rotate(-60deg);
			-webkit-transform-origin: 0 100%;
			transform-origin: 0 100%;
			margin-top: 20%;
		}

		.arrow::after {
			top: 50%;
			transform: translateX(-50%) rotate(-120deg);
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
			margin-top: 20%;
		}
		.arrow::before, .arrow::after {
			content: " ";
			position: absolute;
			left: 50%;
			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;
			transform: translateX(-50%) rotate(-45deg);
		}
		.arrwp:hover .arrow::after {
			background: #FF4081;
			transform: translateX(-50%) translateY(2%) rotate(-135deg);
		}

		/*底盘*/
		.arrwp {
			position: fixed;
			bottom: 0px;
			right: 0px;
			width: 65px;
			height: 65px;
		}
		#forward {
			position: absolute;
			bottom: 0px;
			right: 75px;
			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>

效果图：

20220126_194016_GifNo.2.gif

感觉角度和位置还有一小点瑕疵，先用着吧。

实际使用效果：