利用css创建动画

冷不防 2022-12-21 02:27 192阅读 0赞

### 利用css创建动画 ###

*  (一)@keyframes创建动画规则
 *  (二)transform设置位置
 *  (三)animation设置动画
 *  实例
 *   *  自动滚动（从下到上匀速运动）
     *  360度旋转（可用于刷新加载的样式）
     *   *   *   *   *  可以利用css动画与轮播图简易结合，

首先需要了解以下三个css属性

# (一)@keyframes创建动画规则 #

@keyframes创建动画规则，可以用以下两种来表示动画的开头语完成  
(1)\_0%\_是动画开头，\_100%\_是动画完成  
(2)**from** (和0%相同)， **to** (和100%相同)

# (二)transform设置位置 #

(1) translate3d(x,y,z)定义3D转化，可以用来创建动画的起始终点位置  
(2) rotate(0deg)定义角度大小

# (三)animation设置动画 #

animation是一个简写属性，包含以下几个内容：

1.  animation-name 动画名称
2.  animation-duration 动画时长
3.  animation-timing-function速度曲线  
    linear:匀速；ease：低速-加快-低速；ease-in：低速开始；ease-out：低速结束；ease-in-out：低速开始和结束；cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。（可能的值是从 0 到 1 的数值。）
4.  animation-delay动画启动前的延迟
5.  animation-iteration-count动画次数
6.  animation-direction规定是否应该轮流反向播放动画。

# 实例 #

## 自动滚动（从下到上匀速运动） ##

// html
    	<view class="box">
    			<view class="rolling">
    				<view class="width33">文本</view>
    				<view class="width33">文本</view>
    				<view class="width33">文本</view>
    				<view class="width33">文本</view>
    				<view class="width33">文本</view>
    			</view>
    		</view>

// css
    /* 设置盒子样式 */
     .box{ 
    		position: relative;
    		height: 100rpx;
    		width:200rpx;
    		overflow: hidden;
    		background-color: #007AFF;
    		
    	}
    	/* 设置动画起始位置y坐标从0到-100px */
     @keyframes rolling { 
    	   0% { 
    	     transform: translate3d(0, 0, 0);
    	      }
    	   100% { 
    	      transform: translate3d(0, -100px, 0);
    	         }
    	              }
    
    	/* 动画时长 动画名 动画曲线等样式 */
    .box .rolling { 
    	 animation: 10s rolling linear infinite normal;
    	position: relative;
    	}
    	/* 注意class名与animation名必须一致*/

## 360度旋转（可用于刷新加载的样式） ##

// html
    	<view class="refresh">
    			<image src="@/static/refresh.png" mode=""></image>
    		</view>

// css
    	
    .refresh image { 
    		height: 56rpx;
    		width: 56rpx;
    	}
    
    	.refresh { 
    		color: #fff;
    		background-color: #0ecff9;
    		height: 56rpx;
    		width: 56rpx;
    		padding: 32rpx;
    		border-radius: 50%;
    		animation: spin 2s infinite linear;/* 动画属性*/
    
    	}
    
    	
    /* 旋转起始角度*/
    	@keyframes spin { 
    		0% { 
    			transform: rotate(0deg);
    		}
    
    		100% { 
    			transform: rotate(360deg);
    		}
    	}

@@@@@@@@@@@@@@@@@@@

###### 可以利用css动画与轮播图简易结合， ######

![在这里插入图片描述][20201116113620919.gif_pic_center]  
附上html与css(此处利用的轮播图是uni-app的官方组件)

//html
    <view class="uni-padding-wrap">
    			<view class="page-section swiper">
    				<view class="page-section-spacing">
    					<swiper class="swiper" :indicator-dots="indicatorDots" autoplay="true" interval="5500" duration="1000" circular="true" :duration="duration">
    						<swiper-item>
    							
    							<view class="swiper-item">
    								<image :src="img_url_3" class="move" ></image>
    								<image :src="img_url_4" class="note"></image>
    							</view>
    						</swiper-item>
    						<swiper-item>
    							<view class="swiper-item">
    								<image :src="img_url_1" class="move"></image>
    								<image :src="img_url_4" class="note"></image>
    							</view>
    						</swiper-item>
    						<swiper-item>
    							<view class="swiper-item">
    								<image :src="img_url_5" class="move" ></image>
    								<image :src="img_url_4" class="note"></image>
    							</view>
    						</swiper-item>
    					</swiper>
    				</view>
    			</view>
    		</view>

// css
    
    /* /背景图/ */
    	.move { 
    		width:1000rpx;
    		height:400rpx;
    		animation: 5.5s move linear infinite normal;
    		position: relative;
    	}
    
    	@keyframes move { 
    		0% { 
    			transform: translate3d(0, 0, 0);
    		}
    
    		100% { 
    			transform: translate3d(-100px, 0, 0);
    		}
    	}
    
    	/* 小图标 */
    	.note { 
    		position: absolute;
    		z-index: 999;
    		top: 40rpx;
    		left: 20rpx;
    		animation: 5.5s note linear infinite normal;
    		width: 500rpx;
    		height: 200rpx;
    
    	}
    
    	@keyframes note { 
    		0% { 
    			transform: translate3d(0, 0, 0);
    		}
    
    		100% { 
    			transform: translate3d(100px, 0, 0);
    		}
    	}
    
    	/deep/uni-swiper { 
    		height: 400rpx;
    	}

[20201116113620919.gif_pic_center]: /images/20221120/eb58debf1b8a4568af070ceed0daf8c8.png