百度新闻同款左右切换按钮，悬浮变形

最新推荐文章于 2024-08-20 10:18:36 发布

代码盗圣

最新推荐文章于 2024-08-20 10:18:36 发布

阅读量227

点赞数

文章标签： css

本文链接：https://blog.csdn.net/sinat_27171121/article/details/106691305

版权

<!--百度新闻同款切换按钮，复刻于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设计太不习惯，还是百度大法好啊……

代码盗圣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度新闻同款左右切换按钮，悬浮变形

<!DOCTYPE html><html> <head> <style> body { line-height: 1.5; background: #000; } /*箭头*/ #forward .arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg)
复制链接

扫一扫