HTML5 动画效果 ------ 旋转的小球、CSS旋转木马3D相册效果

╰半橙微兮° 2023-07-18 12:46 27阅读 0赞

> ### **css3实现动画效果** ###
> 
> **基本知识点：**
> 
> **Css3常用到的几个属性：transform（变形），transition（过渡），animation（动画）     **
> 
>  *  **transform**
> 
> **translate：平移，移动，水平方向、垂直方向（translateX，translateY，translateZ等）**
> 
> **scale：缩放；扩大缩小，水平方向、垂直方向（scaleX，scaleY，ScaleZ等）**
> 
> **rotate：旋转，单位为deg（角度，顺时针方向为正），默认沿中心点旋转（水平方向的1/2和垂直方向的1/2的交点）**
> 
> **transform-origin：默认为中心，值为 center center；可以为top left（沿着左上角旋转），bottom right（沿着右下角旋转），等等。也可以设置为百分数**
> 
> **skew：倾斜转换；扭曲，斜切，改变原来图形，单位也是deg（skewX，skewY等）**
> 
>  *  **transition**
> 
> **transition：过渡的属性名 过渡时间  过渡模式（可以有多个属性，多个值）**
> 
> **过渡模式有 linear（匀速）、ease（缓慢-加快-缓慢）、ease-in（缓慢-加快；慢速开始）、  ease-out（加快-缓慢；慢速结束） 、ease-in-out（缓慢开始和结束）**
> 
> **例如，****transition: width 3s,height 3s,background 3s;**
> 
> **等价于****transition: all 3s;**

>  **制作动画效果思路：先定义一个动画，然后将他赋给某个值**
> 
> **逐帧动画：每一帧或者每几帧发生一次变化**
> 
> **@keyframes****用于定义一个动画**

>  下面我写了一个简单的案例，实现不断旋转运动的球体：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>css-sphere</title>
    	<style>
    		*{padding: 0px;margin: 0px;list-style: none;}
    		html{background: #000;}
    		#view{margin: 200px auto;width: 400px;height: 400px;border-radius: 50%;}
    		.item{background: #000;
    			  width: 400px;
    			  height: 400px;
    			  border-radius: 50%;
    			  border: 2px solid #fff;
    			  position: absolute;
    			  opacity: 0.7;
    			  /*不透明*/
    			  cursor: pointer;
    		}
    		@keyframes scroll1{
    			from{transform: rotateY(0deg);}
    			to{transform: rotateY(360deg);}
    		}
    		@keyframes scroll2{
    			from{transform: rotateY(45deg);}
    			to{transform: rotateY(405deg);}
    		}
    		@keyframes scroll3{
    			from{transform: rotateY(90deg);}
    			to{transform: rotateY(450deg);}
    		}
    		@keyframes scroll4{
    			from{transform: rotateY(135deg);}
    			to{transform: rotateY(495deg);}
    		}
    		@keyframes scroll{
    		100%{transform: rotate3d(0,1,0,360deg);}
    			/*沿着（0,1,0）这个向量，旋转360°*/
    		}
    		#view{
    			perspective-origin: 50% 50%;
    			transform-style: preserve-3d;
    			animation: scroll 10s linear 9s forwards infinite;
    		}
    		#item1{
    			z-index: 1;
    			transform-style: preserve-3d;
    			animation: scroll1 2s linear 2s forwards infinite;
    		}
    		#item2{
    			z-index: 2;
    			transform-style: preserve-3d;
    			animation: scroll2 2s linear 4s forwards infinite;
    		}
    		#item3{
    			z-index: 3;
    			transform-style: preserve-3d;
    			animation: scroll3 2s linear 6s forwards infinite;
    		}
    		#item4{
    			z-index: 4;
    			transform-style: preserve-3d;
    			animation: scroll4 2s linear 8s forwards infinite;
    		}
    	</style>
    </head>
    <body>
    	<div id="view">
    		<ul id="sphere">
    			
    			<li class="item" id="item1"></li>
    			<li class="item" id="item2"></li>
    			<li class="item" id="item3"></li>
    			<li class="item" id="item4"></li>
    		</ul>
    	</div>
    </body>
    </html>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzc0MTIw_size_16_color_FFFFFF_t_70][]

> 第二个案例是我做的一个3D旋转木马相册效果
> 
> 鼠标触碰某张图片，相册停止运动，具体实现看代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>css-album</title>
    	<style>
    		*{padding: 0px;margin:0px;}
    		/*div{position: relative;}*/
    		img{width: 430px;
    			height: 400px;
    			z-index: -1;
    			position: absolute;
    			bottom: 0px;
    			box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    			border:2px solid rgba(255,255,255,.5);
    			cursor: pointer;
    			max-width: 100%;
    		}
    		#stage{
    			perspective-origin: center 30%;
    			perspective: 4000px;
    			width: 400px;
    			height: 400px;
    			min-height: 100%;
    			position: relative;
    			margin-left: 600px;
    			margin-top: 200px;
    		}
    		#container{
    			position: absolute;
    			width: 400px;
    			height: 400px;
    			/*top: 50%;
    			left: 50%;
    			margin-top: -100px;
    			margin-left: -100px;*/
    			transform-style: preserve-3d;
    			animation-duration: 2s;
    			transition-duration: 2s;
    			animation: scroll 10s linear 2s forwards infinite;
    		}
    		#container>img:not(:target){z-index: -1;}
    		@keyframes scroll{
    			0%{transform: rotateY(0deg);}
    			100%{transform: rotateY(360deg);}
    		}
    		#container:hover{
    			animation-play-state: paused;
    		}
    		img:nth-child(0){
    			transform: rotateY(0deg) translateZ(500px);
    		}
    		img:nth-child(1){
    			transform: rotateY(60deg) translateZ(500px);
    		}
    		img:nth-child(2){
    			transform: rotateY(120deg) translateZ(500px);
    		}
    		img:nth-child(3){
    			transform: rotateY(180deg) translateZ(500px);
    		}
    		img:nth-child(4){
    			transform: rotateY(240deg) translateZ(500px);
    		}
    		img:nth-child(5){
    			transform: rotateY(300deg) translateZ(500px);
    		}
    		img:nth-child(6){
    			transform: rotateY(360deg) translateZ(500px);
    		}
    	</style>
    </head>
    <body>
    	<div id="stage">
    		<div id="container">
    			<img src="images/c01.jpg" alt="" id="i1">
    			<img src="images/c02.jpg" alt="" id="i2">
    			<img src="images/c03.jpg" alt="" id="i3">
    			<img src="images/c04.jpg" alt="" id="i4">
    			<img src="images/c05.jpg" alt="" id="i5">
    			<img src="images/c06.jpg" alt="" id="i6">
    		</div>
    		
    	</div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzc0MTIw_size_16_color_FFFFFF_t_70]: /images/20230528/a20ece8b0aa643aba99bc55722bf303b.png