常用的css动画效果

图片持续旋转

<img src="">

<style>
	img{
		/* 该属性的第一个参数是动画名称，即spin，第2个参数是动画时长，在此设置为1秒，第3个属性为速度曲线，在此设置为匀速运动，第4个属性infinite参数表示动画将无限循环 */
		animation: out 5s linear infinite;
		/* -webkit-animation: out 1s linear 1s 5 alternate; */
		}
		
		/*  浏览器兼容 */
	/* 	@-webkit-keyframes out {
		from {
			-webkit-transform: rotate(0deg);
		}

		to {
			-webkit-transform: rotate(360deg);
		}
	} */
	/* .out 的动画 */
	@keyframes out {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>

鼠标移入放大

<button>This is a btn</button>

<style>
	button{
		transition: all 0.3s;
		}
	button:hover {
		transform: scale(1.2);
	}
</style>

元素上下平移（箭头指引）

<div class="arrow">V</div>  /* 意思一下搞个v */

.arrow {
	
		animation: arrow 1s infinite;
	}
@keyframes arrow {
		0%{
			transform: translate(0px,-10px);
		}
		50%{
			transform: translate(0px,10px);
		}
		100%{
			transform: translate(0px,-10px);
		}
	}

文字展开（文字间隙扩大）

<div class="left">
	<div style="text-align: right;">又懒又菜的菜狗</div>
</div>

.left{
	/* 文字间隙 */
	animation: textSpacing 1s;
	letter-spacing: 15px;/* 动画结束后效果固定 */
}
@keyframes textSpacing {
		from {
			letter-spacing: 0;
		}
		to {
			letter-spacing: 15px;
		}
	}

文字依次跳动出现

<template>
	<i v-for="(item,index) in msg" :key="index" :style="{animationDelay: index*0.1 + 's' }">{{item}}</i>
</template>

<script>
	export default {
		data() {
			return {
				msg: ['真', '·', '的', '晕', '倒']
			};
		}
	}
</script>

<style>
	i {
				font-style: normal;
				display: inline-block;
				opacity: 0;
				animation: jumpOut 1s ease-in-out forwards;
				/* animation-delay: 1s;//延迟1秒 */
			}

			@keyframes jumpOut {
				from {
					transform: translateY(20px);
					opacity: 0;
				}

				to {
					transform: translateY(0);
					opacity: 1;
				}
			}
</style>

鼠标悬停，logo从左到右切换

使用伪类元素切换。

<div class="center"></div>

	.center {
			width: @width;
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.center::before{
				display: block;
			    content: "";
			    width: 0;
			    height: 80px;
			    background-color: #6892ff;
			    background: url("**") left;
			    background-size: auto 100%;
			    position: absolute;
			    top: 10px;
			    left: 10px;
			    transition: width .3s ease;
			    transition-duration: 0.3s;/* 过渡的持续时间 */
			    transition-timing-function: ease;/* 过渡的缓动函数 */
			    transition-delay: 0s;
			    transition-property: width;
			    z-index: 2;
				overflow: hidden;
		}
		.center::after {
			
		      display: block;
		      content: "";
		      width: 100%;
		      height: 100%;
		      background: url("**");
		      background-size: 100%;
		      position: absolute;
		      top: 0;
		      left: 0;
		}

		.center:hover::before {
			width: 70px;
		}