评论

小程序动画循环播放

小程序动画循环播放

最近在开发一款社交类App,要实现心跳的效果(见下图)

wxml代码

<view class="css_heart"></view>

wxss代码

   .css_heart{
       width:100px;
       height:100px;
       background-color:red;
       animation:scale-down 1s infinite;
    }
    @keyframes scale-down {
	    0% {
	        opacity: 0;
	        transform: scale(1)
	    }
	
	    10% {
	        opacity: 0.9;
	        transform: scale(0.9)
	    }
	
	    20% {
	        opacity: 0.9;
	        transform: scale(0.8)
	    }
	
	    30% {
	        opacity: 0.9;
	        transform: scale(0.7)
	    }
	
	    40% {
	        opacity: 0.9;
	        transform: scale(0.6)
	    }
	
	    50% {
	        opacity: 0.9;
	        transform: scale(0.5)
	    }
	
	    60% {
	        opacity: 0.8;
	        transform: scale(0.5)
	    }
	
	    70% {
	        opacity: 0.8;
	        transform: scale(0.5)
	    }
	
	    80% {
	        opacity: 0.7;
	        transform: scale(0.5)
	    }
	
	    90% {
	        opacity: 0.6;
	        transform: scale(0.5)
	    }
	
	    100% {
	        opacity: 0.5;
	        transform: scale(0.5)
	    }
	
	    60% {
	        opacity: 0.6;
	        transform: scale(0.5)
	    }
	
	    40% {
	        opacity: 0.9;
	        transform: scale(0.8)
	    }
	
	    20% {
	        opacity: 0.9;
	        transform: scale(0.9)
	    }
	}


最后一次编辑于  2022-08-23  
点赞 0
收藏
评论
登录 后发表内容