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);
		}
	}
}

在这里插入图片描述

  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值