CSS-动画

冷不防 2022-05-03 09:30 241阅读 0赞

**前言**

*  本文主要内容：
    
    过渡：transition
    
    2D 转换 transform（scale，translate，rotate）
    
    3D 转换 transform（translatex,translatey,translatez,rotatex,rotatey,rotatez）
    
    动画：animation

transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
    
    帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
    
    **下面都是这些内容的应用实例**

**1.动画走一个正方形**

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>动画</title>
    <style type="text/css">
    *{
    	margin:0px;
    	padding:0px;
    }
    
    .box1{
    	width:200px;
    	height:200px;
    	background-color:#C63;
       animation:move 4s infinite;
    	
    }
    @keyframes move{
    	0%
    	{
    		transform:translateX(0px) translateY(0px);
    		background-color:#F9C;
    		border-radius:0%;
    	}
    	25%
    	{
    		transform:translateX(200px) translateY(0px);
    		background-color:#3FC;
    	}
    	50%
    	{
    		transform:translateX(200px) translateY(200px);
    		background-color:#06F;
    		border-radius:50%;
    	}
    	75%
    	{
    		transform:translateX(0px) translateY(200px);
    		background-color:#F90;
    	
    	}
    	100%
    	{
    		transform:translateX(0px) translateY(0px);
    		background-color:#C63;
    			border-radius:0%;
    	}
    
    </style>
    </head>
    <body>
    <div class="box1"></div>
    
    </body>
    </html>
    亲们，因为我现在没有录屏软件所以上传不了动态效果望多多见谅，自己尝试一下哟！！！
    一定要多练

**2.简易模拟秒表的情形**  
很有趣的自己试试

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>div布局</title>
    <style type="text/css">
    div{
    	width:5px;
    	height:100px;
    	background-color:#000;
    	margin:0px auto;
    	transform-origin:center bottom;
    	animation:myclock 60s steps(60) infinite;
    	
    }
    	@keyframes myclock{
    		0%
    		{
    			transform:rotate(0deg);
    		}
    		100%
    		{
    			transform:rotate(360deg);
    		}
    	}
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

**3.3D呈现一个正方体**（6面体旋转）

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>动画</title>
    <style type="text/css">
    <!清除默认样式-->
    *{
    	margin:0px;
    	padding:0px;
    }
    
    .box{
    	width:250px;
    	height:250px;
    	border:1px #FF0000 dashed;
    	margin:100px auto;
    	position:relative;
    	transform-style:preserve-3d;
    	animation:ti 8s linear infinite;
    	
    }
    
    .box>div
    {
    	width:100%;
    	height:100%;
    	position:absolute;
    	text-align:center;
    	line-height:250px;
    	font-size:60px;
    	color:#F96;
    }
    
    .left{
    	background-color:#0CF;
    	transform-origin:left;
    	transform:translatex(-125px) rotatey(90deg);	
    }
    .right{
    	background-color:#6C9;
    	transform-origin:right;
    	transform:translatex(125px) rotatey(90deg);
    	
    }
    .forword{
    	background-color:#F60;
    	transform:translatez(125px);
    }
    .back{
    	background-color:#639;
    	transform:translatez(-125px);
    }
    .up{
    	background-color:#C93;
    	transform:translatez(125px) rotatex(90deg);
    }
    
    .down{
    	background-color:#CF3;
    	transform:translatez(125px) rotatex(-90deg);
    }
    @keyframes ti
    {
        0%
    		{
    			transform:rotatex(0deg) rotatey(0deg);
    		}
    		100%
    		{
    			transform:rotatex(360deg) rotatey(360deg);
    		}
    	}
    </style>
    </head>
    <body>
    <div class="box">
    <div class="up">上</div>
    <div class="down">下</div>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="forword">前</div>
    <div class="back">后</div>
    </div>
    </body>
    </html>
    静态图如下：自己可以尝试一下看一下动态效果！！！

![正方体][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_27_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_27_color_FFFFFF_t_70]: /images/20220503/49cb375972e14fbca4f26a8ff80cc284.png