Web练习——立体相册，特效按钮

最新推荐文章于 2024-06-14 11:01:38 发布

融社

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量394

点赞数 5

分类专栏： HTML 文章标签：前端

本文链接：https://blog.csdn.net/weixin_56514524/article/details/135398582

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

立体相册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				perspective: 1000px;
			}
			@keyframes myAnimation{
				from{
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				}
				to{
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}
			.container{
				margin: 200px;
				position: relative;
				transform-style: preserve-3d;
				transition: 3s;
				animation: myAnimation 5s linear 0s infinite;
			}
			.container:hover>img:first-child{
				left:-300px;
			}
			.container:hover>img:nth-child(2){
				top: -300px;
			}
			.container:hover>img:nth-child(3){
				left: 300px;
			}
			.container:hover>img:nth-child(4){
				top: 300px;
			}
			.container:hover>img:nth-child(5){
				transform: translateZ(-100px);
			}
			.container:hover>img:nth-child(6){
				transform: translateZ(300px);
			}
			.container>img{
				width: 200px;
				height: 200px;
				position: absolute;
				border: 1px solid orange;
				transition: 3s;
			}
			.container>img:first-child{
				left:-200px;
				transform-origin: right;
				transform: rotateY(90deg);
			}
			.container>img:nth-child(2){
				top:-200px;
				transform-origin: bottom;
				transform: rotateX(-90deg);
			}
			.container>img:nth-child(3){
				left:200px;
				transform-origin: left;
				transform: rotateY(-90deg);
			}
			.container>img:nth-child(4){
				top: 200px;
				transform-origin: top;
				transform: rotateX(90deg);
			}
			.container>img:nth-child(6){
				transform: translateZ(200px);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img src="图1.jpg" alt="" />
			<img src="图2.jpg" alt="" />
			<img src="图3.jpg" alt="" />
			<img src="图4.jpg" alt="" />
			<img src="图5.jpg" alt="" />
			<img src="图6.jpg" alt="" />
		</div>
	</body>
</html>

默认状态：
在这里插入图片描述
鼠标悬停时：

特效按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 20px;
				border: 1px solid rebeccapurple;
				text-align: center;
				border-radius: 10px;
				color: rebeccapurple;
				box-shadow: 2px 2px 10px rebeccapurple,
				-2px 2px 10px rebeccapurple,
				-2px -2px 10px rebeccapurple,
				2px -2px 10px rebeccapurple;
				transition: 3s;
			}
			div:hover{
				box-shadow: none;
				background-color: rebeccapurple;
				color: white;
			}
		</style>
	</head>
	<body>
		<div>按钮</div>
	</body>
</html>