![](https://img2018.cnblogs.com/blog/1468607/201910/1468607-20191012174457894-91166408.png)
![](https://img2018.cnblogs.com/blog/1468607/201910/1468607-20191024145210457-412111153.png)
![](https://img2018.cnblogs.com/blog/1468607/201910/1468607-20191024145218612-1013793314.png)
// =========================================第一个动画
<template> <!-- 这个组件用于 页面下滑到底部时 展示加载动画 --> <view> <!-- 加载动画 --> <view class='loadTextAnimotion'> <view class='pillar animotion01'></view> <view class='pillar animotion02'></view> <view class='pillar animotion03'></view> <view class='pillar animotion04'></view> <view class='pillar animotion05'></view> <view class='pillar animotion06'></view> </view> </view> </template> <script> export default { data () { return {} } } </script> <style lang="less" scoped> .loadTextAnimotion{ // 点击加载后的动画 text-align: center; line-height: 150upx; color: #c5c2c2; font-weight: bold; .pillar{ display:inline-block; vertical-align: middle; background-color: #c5c2c2; width:10upx; border-radius: 40upx; margin: 0 10upx; } .animotion01{ animation: pillarHeight 1s infinite -0.5s; } .animotion02{ animation: pillarHeight 1s infinite -0.4s; } .animotion03{ animation: pillarHeight 1s infinite -0.3s; } .animotion04{ animation: pillarHeight 1s infinite -0.2s; } .animotion05{ animation: pillarHeight 1s infinite -0.1s; } .animotion06{ animation: pillarHeight 1s infinite; } @keyframes pillarHeight { 0% {height:20upx} 50% {height:60upx} 100% {height:20upx} } } </style>
// =========================================第二个动画 <template> <view class='load-mask'> <view class="load-container"> <view class='load p1'/> <view class='load p2'/> <view class='load p3'/> <view class='load p4'/> </view> </view> </template> <script> export default { } </script> <style lang="less" scoped> .load-mask{ width: 100%; height: 100%; position: absolute; top: 0upx; left: 0upx; background-color: rgba(255, 255, 255, 0.5); display: flex; justify-content: center; align-items: center; .load-container{ position: relative; .load{ position: absolute; transform: translate(-50%, -50%) } .p1{ border: 50upx solid transparent; border-top-color: rgb(97,203,211); animation: p1 1s infinite; } .p2{ border: 50upx solid transparent; border-right-color: rgb(97,203,211); animation: p2 1s infinite; } .p3{ border: 50upx solid transparent; border-bottom-color: rgb(97,203,211); animation: p3 1s infinite; } .p4{ border: 50upx solid transparent; border-left-color: rgb(97,203,211); animation: p4 1s infinite; } @keyframes p1 { 0% { top: 0upx } 50% { top: -50upx } 100% { top: 0upx } } @keyframes p2 { 0% { left: 0upx } 50% { left: 50upx } 100% { left: 0upx } } @keyframes p3 { 0% { top: 0upx } 50% { top: 50upx } 100% { top: 0upx } } @keyframes p4 { 0% { left: 0upx } 50% { left: -50upx } 100% { left: 0upx } } } } </style>