WEB前端——three（立体相册，炫酷按钮）

@DKX

已于 2024-02-01 14:34:22 修改

阅读量593

点赞数 10

文章标签：前端

于 2024-01-12 21:56:35 首次发布

本文链接：https://blog.youkuaiyun.com/qq_68600196/article/details/135562169

版权

（1）做一个立体相册

代码呈现：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>幻影忍者人物图片</title>
		<style>
			body {
				perspective: 2000px;
			}

			.container {
				width: 200px;
				height: 200px;
				margin: 300px auto;
				position: relative;
				transform-style: preserve-3d;
				animation: mylove 5s linear 0s infinite;
			}

			@keyframes mylove {
				from {
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				}

				to {
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}

			.container:hover>img:first-child {
				transform: translateZ(-300px);
			}

			.container:hover img:nth-child(2) {
				transform: rotateY(-90deg) translateZ(100px);
			}

			.container:hover img:nth-child(3) {
				transform: rotateX(90deg) translateZ(100px);
			}

			.container:hover img:nth-child(4) {
				transform: rotateY(90deg) translateZ(100px);
			}

			.container:hover img:nth-child(5) {
				bottom: -200px;
				transform-origin: top;
				transform: rotateX(-90deg) translateZ(100px);
			}

			.container:hover img:nth-child(6) {
				transform: translateZ(100px);
			}

			.container>img {
				width: 200px;
				height: 200px;
				position: absolute;
				transition: 1s;
			}

			.container>img:first-child {
				transform: translateZ(-200px);
			}

			.container>img:nth-child(2) {
				left: -200px;
				transform-origin: right;
				transform: rotateY(-90deg);
			}

			.container>img:nth-child(3) {
				top: -200px;
				transform-origin: bottom;
				transform: rotateX(90deg);

			}

			.container>img:nth-child(4) {
				right: -200px;
				transform-origin: left;
				transform: rotateY(90deg);
			}

			.container>img:nth-child(5) {
				bottom: -200px;
				transform-origin: top;
				transform: rotateX(-90deg);
			}

		</style>
	</head>
	<body>
		<div class="container">
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4c41272d-b81d-406b-82de-828bc9e00eaf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895249&t=e0f94ba91fa2c312e1b853a43fa157a8"
				alt="">
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3f406081-97b5-498c-be9c-472e5541696a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895125&t=994d3e36c61cb05bbe4461698d24f3cb"
				alt="">
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F580d7679-f84a-4d2c-b3e7-685b4498fbb9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895209&t=1f96a8e7a844f5fd75d19dea9bb3fd88"
				alt="">
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d6d0aa2-5800-4111-a043-8f8cc2f91e01%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895285&t=e86d08bfe75233e7d17cf4a439234893"
				alt="">
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd413d626-5b43-4a2d-95f2-67b2bd615480%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895285&t=91a60bcafe616c4f5f58bbec36d56b63"
				alt="">
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F90d2d219-6394-40ce-ac23-77f858bb3b94%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895285&t=028a7058a3e9fdfebce15b80ee245970"
				alt="">
		</div>
	</body>
</html>

结果演示：

立体相册（幻影忍者人物图片）

（2）做一个炫酷按钮

代码呈现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>炫酷按钮</title>
	<body>

		<button class="cool-button">2024，点我求好运</button>

	</body>
	<style>
		.cool-button {
			padding: 30px 60px;
			font-size: 20px;
			color: bisque;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			outline: none;
			background-image: linear-gradient(45deg, #ff5500 0%, #ffaa7f 100%);
			box-shadow: 0 4px 15px rgba(85, 255, 255, 0.2);
			transition: all .5s ease;
		}

		.cool-button:hover {
			background-image: linear-gradient(45deg, #ffaaff 0%, #ff55ff 100%);
			box-shadow: 0 6px 20px rgba(255, 85, 0, 0.3);
		}

		.cool-button:active {
			box-shadow: 0 2px 10px rgba(0, 0, 127, 0.2);
			transform: translateY(3px);
		}
	</style>
	</head>
</html>

结果演示：

由于录屏问题，鼠标移动到按钮上的阴影效果与点击的阴影效果未能很好的体现，可尝试运行所示代码详察，见谅！

炫酷按钮