佛山网页制作教程_电子设计工程期刊_朋友圈广告怎么投放_做一个网站要多少钱

一、效果如下：

二、css常用动画代码：

.flex-box{position: relative;
}
.animation-all {display: flex;p{margin:0;font-size: 12px;}.animate-test1 {width: 102.4px;height: 102.4px;background: url(../assets/images/caomei.png) no-repeat center center;background-size: 100% 100%;animation: 10s ease 0s infinite normal none running animate1;margin-right: 30px;}.animate-test2 {width: 102.4px;height: 102.4px;background: url(../assets/images/caomei.png) no-repeat center center;background-size: 100% 100%;animation: animate2 3s infinite alternate;margin-right: 30px;}.animate-test3 {width: 102.4px;height: 102.4px;background: url(../assets/images/caomei.png) no-repeat center center;background-size: 100% 100%;animation: animate3 3s infinite alternate;margin-right: 30px;}.animate-test4 {width: 102.4px;height: 102.4px;background: url(../assets/images/caomei.png) no-repeat center center;background-size: 100% 100%;animation: animate4 2s infinite; /* 应用动画 */margin-right: 30px;position: absolute;}	
}@keyframes animate1 {0% {// transform: translateY(-50%) rotateY(0deg);transform: translateY(0%) rotateY(0deg);}100% {// transform: translateY(-50%) rotateY(360deg);transform: translateY(0) rotateY(360deg);}}@keyframes animate2 {0% {transform: rotateX(0deg);}100% {transform: rotateX(-360deg);}}@keyframes animate3 {0% {transform: rotateY(0deg);}100% {transform: rotateY(-360deg);}}@keyframes animate4 {0% {top: -5px;// opacity: 0;} /* 动画开始时 */50% {top: 5px;// opacity: 1;} /* 动画中间时 */100% {top: -5px;// opacity: 0;} /* 动画结束时 */}

三、寄语：

愿我们温暖待人
也能被人温暖以待