微信小程序--行星轨迹

效果展示

Demo代码

index.wxml

<view id="container"><view id="sun"></view><view class="orbit" id="earth-orbit"><view class="globe" id="earth"><view class="orbit" id="moon-orbit"><view class="globe" id="moon"></view></view></view></view>
</view>

index.wxss

page {background-color: #20202c;height: 100vh;
}#container {height: 400px;left: calc(50% - 200px);position: absolute;top: calc(50% - 200px);width: 400px;
}#container #sun {background-color: yellow;border-radius: 50%;box-shadow: 0 0 30px white;height: 100px;left: 150px;position: absolute;top: 150px;width: 100px;
}#container .orbit {border: solid;border-color: white transparent transparent transparent;border-radius: 50%;border-width: 1px 1px 0 0;box-sizing: border-box;position: absolute;transform: rotate(0deg);transform-origin: center;
}#container .orbit#earth-orbit {animation: orbit 6s linear infinite;height: 300px;left: 50px;top: 50px;width: 300px;
}#container .orbit#moon-orbit {animation: orbit 2.7s linear infinite;height: 80px;left: -25px;top: -25px;width: 80px;
}#container .orbit .globe {border-radius: 50%;position: absolute;
}#container .orbit .globe#earth {background: aqua;height: 30px;right: 28px;top: 28px;width: 30px;
}#container .orbit .globe#moon {background: #d6d6d6;height: 12px;right: 2px;top: 8px;width: 12px;
}@-webkit-keyframes orbit {to {transform: rotate(360deg);}
}@keyframes orbit {to {transform: rotate(360deg);}
}

index.js

{"usingComponents": {}
}

index.json

Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

微信小程序--行星轨迹相关推荐

[js] 微信小程序实现轨迹回放，微信原生小程序，基于uniapp的小程序？
[js] 微信小程序实现轨迹回放,微信原生小程序,基于uniapp的小程序? 需要写出轨迹拖动,进度条,开始,暂停,结束功能. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
微信小程序实现轨迹回放
在微信小程序实现轨迹回放的效果 1.wxml <map id="map" longitude="{{longitude}}" latitude=" ...
taro开发微信小程序-播放轨迹(十一)
taro集成了地图后如何实现轨迹播放,暂停,停止呢?本身地图并不具备轨迹播放的能力,但是基于地图api可以实现轨迹播放的效果思路如下: 1.获取所有的轨迹坐标点-最好是数组格式的json 2.定义一 ...
python实现轨迹回放供应_微信小程序实现轨迹回放
//index.js//获取应用实例 const app =getApp() Page({ data: { StatusBar: app.globalData.StatusBar, CustomBar ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
微信小程序轨迹回放实现及遇到的坑
微信小程序轨迹回放实现微信小程序轨迹回放主要使用到polyline进行划线操作,以及使用marker去进行小车移动操作.效果图如下: 具体实现代码: trackplay.wxml文件 <!-- ...
uni-app map路线轨迹回放功能及turf.js实现缓冲区渲染（微信小程序）
使用uni-app中 map组件实现路线轨迹回放功能. 1.通过接口获取返回的轨迹点. 2.地图的坐标系与轨迹点的坐标系要保持一致,否则轨迹有偏差.点经纬度转换,wgs84togcj02 =>j ...
uniapp使用高德地图微信小程序SDK生成地图轨迹
一文看懂微信小程序生成地图轨迹一.开发准备 1.下载微信小程序SDK 2.高德控制台申请相关平台key 二.html页面展示地图标签三.引入sdk及定义数据四.相关方法(静态生成两个点之间的轨迹 ...
Udesk对接微信小程序实现商品浏览轨迹上传
作者:张振琦 Udesk提供了小程序专用的行为轨迹SDK,可以用来收集客户的商品浏览轨迹,并在客服对话窗口中访问轨迹处可以查看. 在开发之前,需要先完成两个操作: 确认Udesk客服系统内绑定的小程序 ...

微信小程序--行星轨迹

效果展示

Demo代码

index.wxml

index.wxss

index.js

index.json

微信小程序--行星轨迹相关推荐

最新文章

热门文章