正在加载中动画链接 css左右、关闭按钮

最新推荐文章于 2024-06-19 19:31:10 发布

weixin_30908103

最新推荐文章于 2024-06-19 19:31:10 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qing1304197382/p/11096759.html

本文详细介绍了一种使用CSS实现的动画效果按钮设计，包括左右切换按钮和关闭按钮。通过透明度、旋转和平移等属性变化，使得按钮在鼠标悬停时产生动态效果，增强了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考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;width: 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;width: 50px;height: 50px;}
		#next i {top: 50px;left: auto;width: 50px;right: 0;}
		#prev i::after,#prev i::before {content: "";position: absolute;height: 0%;left: 0;top: 50px;width: 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;width: 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;width: 50px;z-index: 13;transition: all .3s;}
		#close:hover {opacity: 1;}
		#close {left: 10px;top: 70px;}
		#close i {position: absolute;top: 0;left: 0;width: 50px;height: 50px;}
		#close i {top: 25px;left: auto;width: 50px;right: 0;}
		#close i::after,#close i::before {content: "";position: absolute;height: 0%;left: 0;top: 0;width: 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;width: 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;width: 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;width: 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>

转载于:https://www.cnblogs.com/qing1304197382/p/11096759.html