<template>
<view class="container_app">
<view class="circle">
<image src="../../static/logo.png" mode=""></image>
</view>
<view class="dot"></view>
</view>
</template>
<script>
export default {
data() {
return {};
}
}
</script>
<style lang="less">
.container_app {
position: fixed;
width: 100%;
height: 100%;
}
.circle {
width: 150rpx;
height: 150rpx;
// background-color: skyblue;
border-radius: 50%;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%,0);
display: flex;
justify-content: center;
align-items: center;
border: 4rpx solid #F1F0F2;
image{
width: 140rpx;
height: 140rpx;
border-radius: 50%;
}
}
.dot {
width: 10rpx;
height: 10rpx;
background-color: #56BD69;
border-radius: 50%;
position: absolute;
top: calc(25% - 5rpx); /* 设置小圆的垂直位置为大圆的中心 */
left: calc(50% - 5rpx); /* 设置小圆的水平位置为大圆的边缘 */
transform-origin: 25% 82rpx; /* 将旋转中心设置为小圆自身的中心 */
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg) translateX(0); /* 初始位置 */
}
to {
transform: rotate(360deg) translateX(0); /* 绕圆心旋转 */
}
}
</style>效果：绿圆会围着轨道旋转
文章来源：https://www.toymoban.com/news/detail-676500.html
文章来源地址https://www.toymoban.com/news/detail-676500.html
到了这里，关于模拟微信小程序加载动画的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
