动画效果_animation 做类似贝壳开壳的动画-CSDN博客

本文链接：https://blog.csdn.net/weixin_52608028/article/details/113758400

//样式
 .layui-btn-normal {
		   background-color: rgb(93,180,255);
		   animation-name:test1,test2;//动画名称
		   animation-duration: 2.5s,2s;//test1动画执行一次动画用时2.5s，test2动画执行一次动画用时2s
		   animation-iteration-count: infinite,1;//test1动画执行无限次，test2动画执行1次
		   animation-timing-function:ease-in-out;//动画的速度曲线
		}

//动画test1---元素背景颜色动画
@keyframes test1{
45%{background-image: linear-gradient(to bottom left,  rgb(93,180,255) 50%, rgb(177,219,255) 90%,  rgb(93,180,255) 100%);}
50%{background-image: linear-gradient(to bottom left, rgb(93,180,255) 30%,rgb(177,219,255) 70%,   rgb(93,180,255) 100%);}
60%{background-image: linear-gradient(to bottom left,  rgb(93,180,255) 0%,rgb(177,219,255) 40%,  rgb(93,180,255) 80%);}
65%{background-image: linear-gradient(to bottom left, rgb(93,180,255) 0%, rgb(177,219,255) 20%,   rgb(93,180,255) 60%);}
68%{background-image: linear-gradient(to bottom left, rgb(93,180,255) 100%,rgb(177,219,255) 0%);}
}
//动画test2---元素的大小动画
@keyframes test2{
1%{width: 1px;}
99%{width: 120px;}
}