效果图如下所示
不懂得可以看注释 都有说明 主要就是理解怎么用 你会用出什么效果
.wxml
<view class="scroll"></view><image class="borimg" src="http://5b0988e595225./q_70,c_zoom,w_640/images/0402/e58cbe3035f343c082557b42a00e4d2e.jpeg"></image><image class="bormax" src="http://img2./it/u=1249633517,2092238595&fm=26&gp=0.jpg"></image><view class="fanzhuan"></view><!-- load1 --><view class="load1"><view class="rect1"></view><view class="rect2"></view><view class="rect3"></view><view class="rect4"></view><view class="rect5"></view></view>
.wxss
page{width: 100%;padding-bottom: 100px;}view{box-sizing: border-box;}/* 从头到尾速度相同 linear动画无限次播放 infinite动画轮流反向播放 alternate低速开始和结束 ease-in-out*//* 左右滚动 */.scroll{width: 100px;height: 100px;background-color:red;animation:scroll alternate linear infinite 1.5s;}@keyframes scroll{from {margin-left: 0%;}to {margin-left: calc(100% - 100px);}}/* 无线旋转（360） */.borimg{width: 100px;height: 100px;border-radius: 50%;margin: 50rpx calc((100% - 100px) / 2) 0 calc((100% - 100px) / 2);animation: borimg linear infinite 5s;}@keyframes borimg{from{transform:rotate(-360deg);}to{transform:rotate(360deg);}}/* 放大图片 */.bormax{width:300px;height:300px;margin: 50rpx calc((100% - 300px) / 2) 0 calc((100% - 300px) / 2);animation: bormax infinite 1.5s;}@keyframes bormax{from{transform: scale(0.7);}to{transform: scale(1);}}/* 无线反转 */.fanzhuan{width:60px;height:60px;margin: 50rpx calc((100% - 60px) / 2) 0 calc((100% - 60px) / 2);background-color:#67CF22;animation: fanzhuan infinite 1.2s;}@keyframes fanzhuan{0% {transform: perspective(120px) rotateX(0deg) rotateY(0deg);} 50% {transform: perspective(120px) rotateX(-180deg) rotateY(0deg);} 100% {transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}}/* load1 */.load1 {width: 50px;height: 60px;margin: 50rpx calc((100% - 50px) / 2) 0 calc((100% - 50px) / 2);}.load1>view{background-color: #67CF22;height: 100%;width: 6px;float: left;margin-right: 4px;animation: stretchdelay 1.2s infinite ease-in-out;}.load1>.rect2{animation-delay: -1.1s;}.load1>.rect3{animation-delay: -1.0s;}.load1>.rect4{animation-delay: -0.9s;}.load1>.rect5{animation-delay: -0.8s;}@-webkit-keyframes stretchdelay {0%, 40%, 100% { -webkit-transform: scaleY(0.4) }20% { -webkit-transform: scaleY(1.0) }}@keyframes stretchdelay {0%, 40%, 100% {transform: scaleY(0.4);-webkit-transform: scaleY(0.4);} 20% {transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}
遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。
