微信小程序--行星轨迹
海轰Pro
共 2857字,需浏览 6分钟
· 2021-03-10
行星轨迹
效果展示
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);
}
}
说明
1.学习于网络
2.Demo已同步至小程序:
海轰Pro
评论
偷偷告诉你如何一台电脑开多个微信!
大家好,我是轩辕。前几天在粉丝群里,有人问我是怎么在一台电脑上同时登录两个微信的?正好之前写过一篇文章,分析过原理,分享给没看过的小伙伴学习一下。手机端多开微信估计很多人都知道,像华为、小米等手机系统都对此做了支持,不过在运行Windows系统的电脑上怎么启动两个微信呢?其实很简单,你只需要写一个批
编程技术宇宙
0
让扩散模型听话的小秘籍?CAN:通过操控权重来控制条件生成模型,图像生成效率大升级!
↑ 点击蓝字 关注极市平台作者丨科技猛兽编辑丨极市平台极市导读 本文提出的 CAN 模型 (Condition-Aware Neural Network) 是一种对图像生成模型添加控制的方法。CAN 可以通过动态操纵神经网络的权重来控制图像生成过程。作者在 ImageNet 图像
极市平台
0
springboot第70集:字节跳动后端三面经,一文让你走出微服务迷雾架构周刊
创建一个使用Kubernetes (K8s) 和 Jenkins 来自动化 GitLab 前端项目打包的CI/CD流水线,需要配置多个组件。下面,我将概述一个基本的设置步骤和示例脚本,以帮助你理解如何使用这些工具整合一个自动化流程。前提条件确保你已经有:Kubernetes 集群:用于部署 Jenk
程序源代码
0
微服务与领域驱动设计,架构实践总结
来源:知了一笑👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:http://116.62.199.48/ ,新
小哈学Java
0
漫游CPU缓存效应,让你的程序性能飙升!
推荐一个原创技术号-非科班大厂码农,号主是机械专业转行进入腾讯的后端程序员!大多数读者都知道cache是一种快速小型的内存,用以存储最近访问内存位置。这种描述合理而准确,但是更多地了解一些处理器缓存工作中的“烦人”细节对于理解程序运行性能有很大帮助。在这篇博客中,我将运用代码示例来详解 cache工
码农有道公众号
1
低空经济新标杆小龙头
公众号改版,及时收到文章推送需要给公众号加星。大家可以点击页面上方蓝色字【京北夜光】,进入公众号首页,点右上角“...”,点下方“设为星标”。坚持复盘总结分享不容易,点右上角点个在看并分享到朋友圈,看完顺手点个点赞和在看,算是个认可,感谢。在看互动:凡是点了点赞和在看且分享本文到朋友圈的读者,进入公
IT局
77
北斗聚焦 | 工信部组织开展2024年5G轻量化贯通行动;2024全球6G技术大会在南京召开;智能制造装备产业规模超三点二万亿元
周报第一百七十四期2024/4/15-2024/4/21△点击页面右上角“…” 选择 “查找页面内容” 搜索【一周快报】,即可跳转到新版块★★ ★ ★★NO.1工信部组织开展2024年5G轻量化贯通行动记者4月16日从工业和信息化部获悉,工业和信息化部近日印发关于开展2024年度5G轻量
今日北斗
0