css3:呼吸灯效果,图片上下跳动

用到的API:@keyframesanimationtransform: scale()transform: translateY()

<view class="createAnimation">
	<view class="logo">
		<image src="../../static/mine/2.png" mode="">image>
	view>
view>
.createAnimation{
	width: 750rpx;
	height: 750rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1rpx solid red;
	.logo{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border:1px solid transparent;
		animation: huxi 1200ms ease-out infinite alternate;
		uni-image{
			width: 120rpx;
			height: 120rpx;
		}
	}
	@keyframes huxi{
		0%{
			opacity: .2;
			transform: scale(.8);
			transform: translateY(10px);
			box-shadow:0 1px 2px rgba(255,255,255,0.1);
		}
		100%{
			opacity: 1;
			transform: scale(1);
			transform: translateY(-10px);
			box-shadow:0 1px 30px rgba(59,255,255,1);
		}
	}
}

css3:呼吸灯效果,图片上下跳动_第1张图片

你可能感兴趣的:(css,前端,css)