CSS3_Node4_动画效果

最新推荐文章于 2022-09-29 01:46:22 发布

原创最新推荐文章于 2022-09-29 01:46:22 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画

html/css篇专栏收录该内容

12 篇文章

订阅专栏

本文介绍了使用CSS3实现三维动画的技术，包括旋转立方体、拖动立方体旋转及创建折纸效果。通过animation和transition属性，实现了流畅的动画效果，并通过用户交互提供了更丰富的体验。

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

1、旋转立方体--animation&transition实现动画效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation&transition</title>
<style>
*{margin:0;padding:0;list-style: none;}
html,body{
	width:100%;
	height:100%;
	background: url(images/cross.jpg) 0 0 no-repeat;
	background-size: 100% 100%;
	padding-top: 1px;
	perspective:1000px;/*1、视距*/
}
.wrap{
	width:200px;
	height:200px;
	margin:200px auto 0;
	position:relative;
	transform-style:preserve-3d;/*2、子元素具有3d属性*/
	transform:rotateX(13deg) rotateY(0deg);
	animation:move 2s linear 0.2s infinite;
}
.minbox{
	width:100px;
	height:100px;
	opacity: 0.8;
	position: absolute;
	left:50px;
	top:50px;
	transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(images/cross1.png) 0 0 no-repeat;
	transform:translateZ(50px);
}
.minbox li:nth-child(2){
	transform:rotateY(180deg) translateZ(50px);
	background: url(images/cross2.png) 0 0 no-repeat;
}
.minbox li:nth-child(3){
	background: url(images/cross3.png) 0 0 no-repeat;
	transform:rotateY(90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(images/cross4.jpg) 0 0 no-repeat;
	transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(images/cross5.png) 0 0 no-repeat;
	transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(images/cross6.png) 0 0 no-repeat;
	transform:rotateX(-90deg) translateZ(50px);
}
.maxbox{
	width:200px;
	height:200px;
	opacity: 0.5;
	position: absolute;
	left:0;
	top:0;
	transform-style:preserve-3d;
}
.maxbox li{
	width:200px;
	height:200px;
	background: #fff;
	position: absolute;
	left:0;
	top:0;
	transition: all 0.5s ease-out;
}
.wrap:hover .maxbox li:nth-child(1){
	transform:translateZ(320px);
}
.maxbox li:nth-child(1){
	transform:translateZ(100px);
}
.wrap:hover .maxbox li:nth-child(2){
	transform:rotateY(180deg) translateZ(320px);
}
.maxbox li:nth-child(2){
	transform:rotateY(180deg) translateZ(100px);
}
.wrap:hover .maxbox li:nth-child(3){
	transform:rotateY(90deg) translateZ(320px);
}
.maxbox li:nth-child(3){
	transform:rotateY(90deg) translateZ(100px);
}
.wrap:hover .maxbox li:nth-child(4){
	transform:rotateY(-90deg) translateZ(320px);
}
.maxbox li:nth-child(4){
	transform:rotateY(-90deg) translateZ(100px);
}
.wrap:hover .maxbox li:nth-child(5){
	transform:rotateX(90deg) translateZ(250px);
}
.maxbox li:nth-child(5){
	transform:rotateX(90deg) translateZ(100px);
}
.wrap:hover .maxbox li:nth-child(6){
	transform:rotateX(-90deg) translateZ(250px);
}
.maxbox li:nth-child(6){
	transform:rotateX(-90deg) translateZ(100px);
}
@keyframes move{
	from{transform:rotateX(13deg) rotateY(0deg);}
	to{transform:rotateX(13deg) rotateY(360deg);}
}
</style>
</head>
<body>
<div class="wrap">
	<ul class="minbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol class="maxbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>
</body>
</html>

2、拖动立方体旋转

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖动立方体</title>
<style>
*{margin:0;padding:0;list-style: none;}
body{	height: 550px;
		background: #000;
	 	perspective:1000px;
		cursor: url('images/hand1.png'),auto;
}
#cube{
	width:162px;
	height:162px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-81px;
	margin-left:-81px;
	transform-style: preserve-3d;
	transform:rotateX(-20deg) rotateY(50deg);
}
#cube li{
	font-size: 80px;
	line-height: 160px;
	text-align:center;
	color:#fff;
	opacity: 0.8;
	width:160px;
	height:160px;
	border:1px solid #666;
	border-radius: 14%;
	position:absolute;
	top:0;
	left:0;
	transition:all 0.5s linear;
}
.cubescale li:nth-child(1){
	transform:translateZ(180px);
}
ul li:nth-child(1){
	background: #F86F6F;
	transform:translateZ(80px);
}
.cubescale li:nth-child(2){
	transform:rotateY(90deg) translateZ(180px);
}
ul li:nth-child(2){
	background: #E87BFA;
	transform:rotateY(90deg) translateZ(80px);
}
.cubescale li:nth-child(3){
	transform:rotateY(180deg) translateZ(180px);
}
ul li:nth-child(3){
	background: #FEF353;
	transform:rotateY(180deg) translateZ(80px);
}
.cubescale li:nth-child(4){
	transform:rotateY(-90deg) translateZ(180px);
}
ul li:nth-child(4){
	background: #9FFD5F;
	transform:rotateY(-90deg) translateZ(80px);
}
.cubescale li:nth-child(5){
	transform:rotateX(90deg) translateZ(180px);
}
ul li:nth-child(5){
	background: #6DFDD1;
	transform:rotateX(90deg) translateZ(80px);
}
.cubescale li:nth-child(6){
	transform:rotateX(-90deg) translateZ(180px);
}
ul li:nth-child(6){
	background: #6DA2FD;
	transform:rotateX(-90deg) translateZ(80px);
}
p{
	color:#fff;
	height:40px;
	line-height: 40px;
	font-size: 28px;
}
#btn{
	color:#666;
	font-size: 36px;
	padding:8px;
	border-radius:5px;
	cursor: url('images/hand2.png'),auto;
}
</style>
</head>
<body>
<p>X轴转动角度：<var id="numx"></var></p>
<p>Y轴转动角度：<var id="numy"></var></p>
<button id="btn">展开</button>
<ul id="cube">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>
<script>
var cube=document.getElementById('cube');
var btn=document.getElementById('btn');
var numx=document.getElementById('numx');
var numy=document.getElementById('numy');
var body=document.getElementsByTagName('body')[0];
var movex=0,movey=0,arrx=[],arry=[];
document.onmousedown=function(ev){
	var e=ev||window.event;
	e.preventDefault();
	arrx[0]=e.clientX;
	arry[0]=e.clientY;
	body.style.cursor="url('images/hand2.png'),auto";
	document.onmousemove=function(ev){
		var e=ev||window.event;
		e.preventDefault();
		arrx[1]=e.clientX;
		arry[1]=e.clientY;
		movex+=arrx[1]-arrx[0];
		movey+=arry[1]-arry[0];
		numx.innerHTML=movey+'度';
		numy.innerHTML=movex+'度';
		cube.style.transform='rotateX('+movey+'deg) rotateY('+movex+'deg)';
		arrx[0]=e.clientX;
		arry[0]=e.clientY;
	}
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
		body.style.cursor="url('images/hand1.png'),auto";
	}
}
var flag=true;//--合上--展开合上的标记
btn.onclick=function(){
	if (flag) {//合上-展开
		cube.className='cubescale';
		btn.innerHTML='合上';
	}else{//展开->合上
		cube.className='';
		btn.innerHTML='展开';
	}
	flag=!flag;
}
</script>
</body>
</html>

3、折纸

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;list-style: none;}
#wrap{
	width:300px;
	position:relative;
	margin:50px auto 0;
	perspective:1000px;
}
#wrap h1{
	width:100%;
	height:40px;
	line-height: 40px;
	color:#fff;
	font-size:26px;
	background: #000;
	text-indent: 20px;
	position: relative;
	z-index: 20;
}
#btn{
	width:40px;
	height:40px;
	line-height: 40px;
	text-align: center;
	color:#fff;
	font-size: 26px;
	background: #666;
	cursor:pointer;
	position: absolute;
	top:0;
	right:-40px;
	transition: all 0.8s ease-in;
}
#wrap div{
	width:100%;
	position: absolute;
	top:32px;
	left:0;
	transform-origin: left top;
	transform:rotateX(-120deg);
	transform-style:preserve-3d;
}
#wrap>div:nth-of-type(1){
	top:40px;
}
#wrap .open{
	animation:down 1.6s linear forwards;
}
#wrap .open>span:nth-of-type(1){
	box-shadow:inset 0 0 30px 2px rgba(36,63,33,0);
}
#wrap .close{
	animation:up 0.8s linear forwards;
}
#wrap .close>span:nth-of-type(1){
	box-shadow:inset 0 0 30px 2px rgba(36,63,33,1);
}
#wrap div span{
	display: block;
	width: 100%;
	height:28px;
	line-height: 28px;
	background: #B06E34;
	font-size: 16px;
	color:#fff;
	text-indent:20px;
	box-shadow:inset 0 0 30px 2px rgba(36,63,33,1);
	transition:all 0.8s linear;
}
@keyframes down{
	0%{transform:rotateX(-120deg);}
	25%{transform:rotateX(50deg);}
	50%{transform:rotateX(-45deg);}
	75%{transform:rotateX(25deg);}
	100%{transform:rotateX(0deg);}
}
@keyframes up{
	0%{transform:rotateX(0deg);}
	100%{transform:rotateX(-120deg);}
}
</style>
</head>
<body>
<div id="wrap">
	<h1>this is title</h1>
	<p id="btn">开</p>
	<div>
		<span>选项11</span>
		<div>
			<span>选项2</span>
			<div>
				<span>选项3</span>
				<div>
					<span>选项4</span>
					<div>
						<span>选项5</span>
						<div>
							<span>选项6</span>
							<div>
								<span>选项7</span>
								<div>
									<span>选项8</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script>
	var obtn=document.getElementById('btn');
	var adiv=document.getElementsByTagName('div');
	var flag=true;//展开收起-标记
	var timer=null;
	var index=0;//div下标
	obtn.onclick=function(){
		if (flag) {
			var index=1;//每次初始化
			timer=setInterval(function(){
				adiv[index].className='open';
				if (index>=adiv.length-1) {
					clearInterval(timer);
					obtn.style.right='-40px';
					obtn.innerHTML='关';
				}
				index++;
			},200)
			obtn.style.right='0px';
			// flag=false;
		}else{
			var index=adiv.length-1;//每次初始化
			timer=setInterval(function(){
				adiv[index].className='close';
				if (index<=0) {
					clearInterval(timer);
					obtn.style.right='-40px';
					obtn.innerHTML='开';
				}
				index--;
			},100)
			obtn.style.right='0px';
			// flag=true;
		}
		flag=!flag;
	}
</script>
</html>