开盒动画

最新推荐文章于 2022-10-30 10:10:45 发布

#萌面怪兽

最新推荐文章于 2022-10-30 10:10:45 发布

阅读量217

点赞数

本文链接：https://blog.csdn.net/weixin_46508028/article/details/104906255

版权

外盒旋转，开盖，内盒鼠标悬停时上升

	<style type="text/css">
		*{margin: 0;padding: 0;}
		body{
			/*设置3d的环境*/
			transform-style: preserve-3d;
			perspective: 800px;
		}
		.box{
			width:300px;
			height: 300px;
			/*background: rgba(255,0,0,0.8);*/
			position:absolute;
			left:50%;
			*margin-left:-150px;*
			top:200px;
			/*设置3d的环境*/
			transform-style: preserve-3d;
			
			/*本身先旋转*/
			/*transform:rotateY(60deg);*/
			transition:2s;
			animation:move1 3s linear infinite;
		}
		/*.box:hover{
			transform:rotateY(100deg);
		}*/
		/*.box:hover div:nth-child(1){
			transform:rotateX(250deg);
			
		}*/
		.box div:nth-child(1){
			animation:move2 5s 2s linear infinite;
		}
		/*定义动画自动旋转*/
		@keyframes move1{
			0%{transform:rotateY(0deg);}
			50%{transform:rotateY(180deg);}
			100%{transform:rotateY(360deg);}
		}
		/*开盖动画*/
		@keyframes move2{
			0%{transform:rotateX(90deg);}
			50%{transform:rotateX(250deg);}
			100%{transform:rotateX(90deg);}
		}
		.box div{
			width:300px;
			height: 300px;
			position:absolute;
			background: rgba(0,0,0,0.5);
			box-shadow:0px 0px 34px -20px red;
			transition:all 2s;
		}
		/*上面*/
		.box div:nth-child(1){
			/*设置元素旋转基点*/
			transform-origin: center top;
			transform:rotateX(90deg);
			/*background: rgba(0,0,0,0.5);*/
		}
		/*右边*/
		.box div:nth-child(2){
			transform-origin:right center;
			transform:rotateY(90deg);
			/*background: rgba(0,0,0,0.5);*/
		}
		/*下边*/
		.box div:nth-child(3){
			transform-origin:center bottom;
			transform:rotateX(-90deg);
			/*background: rgba(0,0,0,0.5);*/
		}
		
		/*前面*/
		.box div:nth-child(4){
			transform-origin:center;
			transform:translateZ(300px);
			/*background: rgba(0,0,0,0.5);*/
		}
		/*右边*/
		.box div:nth-child(5){
			transform-origin:left center;
			transform:rotateY(-90deg);
			/*background: rgba(0,0,0,0.5);*/
		}
		.box:hover ul{
			transform:translateZ(150px) translateY(-100px);
		}
		ul{
			width: 150px;
			height:150px;
			/*background: yellow;*/
			position:absolute;
			top:50%;
			left:50%;
			margin-top:-75px;
			margin-left:-75px;
			transform:translateZ(150px);
			/*设置3d环境*/
			transform-style: preserve-3d;
			transition:2s;
		}
		li{
			list-style:none;
			width: 150px;
			height:150px;
			position:absolute;
			background:rgba(200,0,0,0.5);
			border:1px solid #000;
		}
		/*上*/
		li:nth-child(1){
			transform:translateY(-75px) rotateX(90deg);
			/*background: pink;*/
		}
		/*右*/
		li:nth-child(2){
			transform:translateX(75px) rotateY(90deg);
			/*background: skyblue;*/
		}
		/*下*/
		li:nth-child(3){
			transform:translateY(75px) rotateX(90deg);
			/*background: orange;*/
		}
		/*后*/
		li:nth-child(4){
			transform:translateZ(-75px);
			/*background: red;*/
		}
		/*前*/
		li:nth-child(5){
			transform:translateZ(75px);
			/*background: gold;*/
		}
		/*左*/
		li:nth-child(6){
			transform:translateX(-75px) rotateY(90deg);
			/*background: purple;*/
		}
		
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
		<div class="box6"></div>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>