网上有很多关于怎么调太阳能时间,怎么通过太阳计算时间的知识，也有很多人为大家解答关于太阳弧时间设置的问题，今天刺梨占星网(nayona.cn)为大家整理了关于这方面的知识，让我们一起来看下吧!
本文目录一览：
1、太阳弧时间设置
太阳弧时间设置
作者：郭世平
转发链接：https://mp.weixin.qq.com/s/f2ZhTN-5R6GOxrJDBrjcVQ
一、前言
最近的项目中，需要实现一个圆弧形倒计时进度条，对于本来 css 知识薄弱的我当场就懵逼，脑海里总是不断思考如何实现，不幸的是脑袋里没能蹦出半个想法。然后立马百度查看网上是否有相似的解决方案，百度下来初步知道如何来实现了，那我们就一步一步从 0 到yǒu开始这段旅chéng。
首先展示一下最终的成果，最终效果图如下：
实现要点：浅色圆弧需要分成左右两边，左右两边都需要用一个同心圆来实现，两色圆弧也需要左右分开，各自用一个同心圆来实现。让我们开始吧！
二、实现步骤添加容器
让整个容器是 position: fixed 方便可以在整个页面上随意放置 html 代码:
<div class="task-container"></div>
css 代码：
.task-container { position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width=\”360px\”,height=\”auto\” />
display: flex; justify-content: center; align-items: center;}画底盘
加点阴影，让它看起来有点lìtǐ的感觉 html 代码:
<div class="task-container"> <div class="task-cicle"></div></div>
css 代码：
.task-container { position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width=\”360px\”,height=\”auto\” />
效果：
重点lái了，接下来实现圆弧
我们先画右圆弧，我们用右半边矩形来实现，右半圆只设置上方和右边的边框颜色 html 代码:
<div class="task-container"> <div class="task-cicle"> <div class="task-inner"> <div class="right-cicle"> <div class="cicle-progress cicle1-inner"></div> </div> </div> </div></div>
css 代码：
.task-container { position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width=\”360px\”,height=\”auto\” />
border-radius: 50%; background: #FFFFFF; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.05); } .task-inner { position: relative; width=\”360px\”,height=\”auto\” />
absolute; top: 0; right: 0; overflow: hidden; } .cicle-progress { position: absolute; top: 0; width=\”360px\”,height=\”auto\” />
right-cicle 需要设置 overflow: hidden;对子元素超出的部分进行裁剪。cicle1-inner 中的旋转-15 度，其实可以根据设计稿来调整你需要展示的弧度 如果父节点，没有进行裁剪，右半圆就会延伸到左边
裁剪之后的效果
画左边的弧
接下来根据同样的原理画左边的弧。左边的圆，只设置上方和左边的边框颜色 html 代码:
<div class="task-container"> <div class="task-cicle"> <div class="task-inner"> <div class="right-cicle"> <div class="cicle-progress cicle1-inner"></div> </div> <div class="left-cicle"> <div class="cicle-progress cicle2-inner"></div> </div> </div> </div></div>
css 代码：
.left-cicle { width=\”360px\”,height=\”auto\” />
效果如下：
ok，圆弧的基本轮廓已经完成，接下来实现亮色进度条，进度条也是分左右边各自实现
画右半边进度条
右半边圆只设置上方和右边的边框颜色 html 代码:
<div class="task-container"> <div class="task-cicle"> <div class="task-inner"> <div class="right-cicle"> <div class="cicle-progress cicle1-inner"></div> </div> <div class="left-cicle"> <div class="cicle-progress cicle2-inner"></div> </div> <div class="right-cicle"> <div class="cicle-progress cicle3-inner" id="rightCicle"></div> </div> </div> </div></div>
css 代码：
.cicle3-inner { left: -23px; border-right: 3px solid #feca02; border-top: 3px solid #feca02; transform: rotate(-135deg);}
效果如下：
为什么是旋转-135 度？进度条是从左边蔓延到右biān的，让亮色进度条旋转到左右两边的临界点，也就是初始角度是-135 度，随着时间推移增加旋转角度，进度条就蔓延到右边了
转到哪个jiǎo度为止呢？转到亮色边框和右边灰色边框重合，也就是-15 度，那么右边亮色进度条的旋转角度范围就是-135 度到-15 度，共 120 度的。
右半边进度条已经完成，初始角度是-135 度，随着时间的推移，慢慢旋转到-15 度的位置
画左半边的进度条
左半圆只设置上方和左边的边框颜色 html 代码:
<div class="task-container"> <div class="task-cicle"> <div class="task-inner"> <div class="right-cicle"> <div class="cicle-progress cicle1-inner"></div> </div> <div class="left-cicle"> <div class="cicle-progress cicle2-inner"></div> </div> <div class="right-cicle"> <div class="cicle-progress cicle3-inner" id="rightCicle"></div> </div> <div class="left-cicle"> <div class="cicle-progress cicle4-inner" id="leftCicle"></div> </div> </div> </div></div>
css 代码：
.cicle4-inner { left: 0; border-left: 3px solid #feca02; border-top: 3px solid #feca02; transform: rotate(195deg);}
效果如下(为了演示，父节点为设置了 overflow: inherit;不裁剪，能更清楚来龙去脉):
为什么要旋转 195 度？进度条是从zuǒ边开始由无到有的，我们让亮色进度条旋转到左边灰色圆弧起始点的临界点位置，随着时间的推移增加旋转角度。左边进度条要转 120 度，所以左边进度条旋转角度范围：195 到 315 度 我们把父节点的 overflow 设置回原来的 hidden，对子节点超出的部分进行裁剪。
what？裁剪之后还露出了一个小尾巴，如何把这个小尾巴给掩盖掉？这时候我们需要在左边再画一个同心圆来遮盖掉它
画遮盖圆
注意：遮罩圆边框宽度要比左边亮色进度条圆的边框宽度要大，不然会遮盖不完全，会出现金色余晖，且要和亮色进度条是同心圆 html 代码:
<div class="task-container"> <div class="task-cicle"> <div class="task-inner"> <div class="right-cicle"> <div class="cicle-progress cicle1-inner"></div> </div> <div class="left-cicle"> <div class="cicle-progress cicle2-inner"></div> </div> <div class="right-cicle"> <div class="cicle-progress cicle3-inner" id="rightCicle"></div> </div> <div class="left-cicle"> <div class="cicle-progress cicle4-inner" id="leftCicle"></div> </div> <div class="left-cicle"> <div class="mask-inner"></div> </div> </div> </div></div>
css 代码(为了展示遮罩圆是完全覆盖的，我把父节点的 overflow: inherit;不cái剪，圆的边框颜色设置为蓝色)：
.mask-inner { position: absolute; left: 0; top: 0; width=\”360px\”,height=\”auto\” />
看，我们的遮罩圆已经完全遮罩了其他圆，遮盖圆和左边进度条圆一样，都是旋转 195 度，只设置上方和左边的边框颜色，边框颜色是和底盘颜色一样，我们把父节点 overflow 设置为 hidden 裁剪 css dài码：
.mask-inner { position: absolute; left: 0; top: 0; width=\”360px\”,height=\”auto\” />
蓝色部分就是我们的小尾巴的位置，我们用白色替换蓝色边框
.mask-inner { position: absolute; left: 0; top: 0; width=\”360px\”,height=\”auto\” />
效果：
哇，看看，小尾巴已经不见了。 如果遮盖圆和左边亮色进度条设置一样的边框大小，会出xiàn金色边
好吧，样式方面已经基本完成，其他点缀de样式就不在这里列出了，可以看看下面的源码。要让进度条动起来，需要通过 js 来操作，js 里的源码我已经写了比较清楚的注释，方便lǐ解。 html 代码：
<div class="task-container"> <div class="task-cicle"> <div class="task-inner"> <div class="right-cicle"> <div class="cicle-progress cicle1-inner"></div> </div> <div class="left-cicle"> <div class="cicle-progress cicle2-inner"></div> </div> <div class="right-cicle"> <div class="cicle-progress cicle3-inner" id="rightCicle"></div> </div> <div class="left-cicle"> <div class="cicle-progress cicle4-inner" id="leftCicle"></div> </div> <div class="left-cicle"> <div class="mask-inner"></div> </div> <div class="inner"> <img src="https://img12.360buyimg.com/img/jfs/t1/150018/30/1001/2042/5eec2f8eEfd3c853a/e7982308423ce71a.png" alt="" srcset=""> <div class="water-count">10</div> </div> </div> <div class="task-bottom"> <div class="task-btn" id="time"></div> </div> </div></div><script> const rightCicle = document.getElementById('rightCicle'); const leftCicle = document.getElementById('leftCicle'); const timeDom = document.getElementById('time'); let isStop = false; let timer; const totalTime = 10; // 总时间 const halfTime = totalTime / 2; // 总时间的一半 const initRightDeg = -135; // 右半边进度条初始角度 const initLeftDeg = 195; // 左半边进度条初始角度 const halfCicle = 120; // 左右连边各要转的总角度 const perDeg = 120 / halfTime; // 每秒转的角度 let inittime = 10; let begTime; // 倒计时开始时间戳 let stopTime; // 倒计时停止时间戳 function run() { const time = inittime; let animation; if (time > halfTime) { // 左半边还没转完 // 左半边：dòng画的初始角度=左半边进度条初始角度+已经转的角度，最终角度=初始角度+120 度，动画持续时间=左半边还剩需要转的时间 // 右半边：动画的初始角度=右半biān进度条初始角度，最终角度=初始角度+120 度，动画持续时间=一半的时间，动画延迟=左半边还剩需要转的时间 animation = ` @keyframes task-left { 0% { transform: rotate(${initLeftDeg + (totalTime – time) * perDeg}deg); } 100% { transform: rotate(${initLeftDeg + halfCicle}deg); } } .task-left { animation-name: task-left; animation-duration: ${time – halfTime}s; animation-timing-function: linear; animation-delay: 0s; animation-fill-mode: forwards; animation-direction: normal; animation-iteration-count: 1; } @keyframes task-right { 0% { transform: rotate(${initRightDeg}deg); } 100% { transform: rotate(${initRightDeg + halfCicle}deg); } } .task-right { animation-name: task-right; animation-duration: ${halfTime}s; animation-timing-function: linear; animation-delay: ${time – halfTime}s; animation-fill-mode: forwards; animation-direction: normal; animation-iteration-count: 1; } `; } else { // 左半边已经转完 // 左半边动画：起始帧和重点帧都=左半边进度条初始角度+120 度 // 右半边动画：动画的初始角度=右半边进度条初始角dù+右半边已经角度，最终角度=初始角度+120 度，动画持续时间=剩余时间 animation = ` @keyframes task-left { 0% { transform: rotate(${initLeftDeg + halfCicle}deg); } 100% { transform: rotate(${initLeftDeg + halfCicle}deg); } } .task-left { animation-name: task-left; animation-duration: 0s; animation-timing-function: linear; animation-delay: 0s; animation-fill-mode: forwards; animation-direction: normal; animation-iteration-count: 1; } @keyframes task-right { 0% { transform: rotate(${initRightDeg + (halfTime – time) * perDeg}deg); } 100% { transform: rotate(${initRightDeg + halfCicle}deg); } } .task-right { animation-name: task-right; animation-duration: ${time}s; animation-timing-function: linear; animation-delay: 0s; animation-fill-mode: forwards; animation-direction: normal; animation-iteration-count: 1; } `; } // 增加动画暂停和开始类 animation += `.stop {animation-play-state: paused;} .run {animation-play-state: running;}` const styleDom = document.createElement('style'); styleDom.type = 'text/css'; styleDom.innerHTML = animation; document.getElementsByTagName('head').item(0).appendChild(styleDom); leftCicle.classList.add('task-left'); rightCicle.classList.add('task-right'); begTime = Date.now(); countDown(); } function countDown() { if (begTime && stopTime) { // 从 1 秒到 1.6 秒后暂停，动画一直在走，而倒计时因为未到 2 秒，定时器就清除了，下次还是会从 1 开始计时， // 这就会导致倒计时和动画的不同步，之类稍微校正一下，rú果结束时间和开始时间取余数大于 500，就把倒计时-1 秒 const runtime = stopTime – begTime; console.log(runtime % 1000); if (runtime % 1000 > 500) { inittime -= 1; } } begTime = Date.now(); timeDom.innerText = `${inittime}秒后获得 `; timer = setInterval(() => { inittime -= 1; timeDom.innerText = `${inittime}秒后获得 `; if (inittime <= 0) { clearInterval(timer); } }, 1000); } // 点击可暂停倒计时和动画 timeDom.addEventListener('click', () => { if (isStop) { isStop = false; countDown(); leftCicle.classList.remove('stop'); leftCicle.classList.add('run'); rightCicle.classList.remove('stop'); rightCicle.classList.add('run'); } else { stopTime = Date.now(); isStop = true; clearInterval(timer); leftCicle.classList.remove('run'); leftCicle.classList.add('stop'); rightCicle.classList.remove('run'); rightCicle.classList.add('stop'); } }, false); run();</script>
css 代码：
.task-container { position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width=\”360px\”,height=\”auto\” />
三、总结
浅色圆弧和亮色进度条的实现比较绕，一眼看过去不太好理解，我们可以把每一步拆分开。4 个圆弧的实现，父节点都进行了裁剪，裁剪之后很难看出子元素原本的样子，我们可以先把裁剪去掉，看看未裁剪时，各个圆的表现。
推荐CSS学习相关文章
这33个chāo级好用的CSS选择器，你可能见都没见过
如何用一行 CSS 实现 10 种现代布局？
rem适配移动端的原理及应用场景
「干货」纯CSS实现瀑布流（Masonry）
手把手教你CSS grid布局「香」
手把shǒu教你20个CSS 快速提升技巧
细品100道CSS知识点（上）「干货满满」
细品100道CSS知识点（下）「干货满满」
手把手教你CSS Flex布局「真香」
细品用SVG实现一个优雅的提示框
手把手整理CSS3知识汇总【思维导图】
手把手教你55 个提高CSS 开发效率的必备片段
手把手教你常见的CSS布局方式【实践】
让CSS flex布局最后一行左对齐的N种方法
妙yòngCSS变量，让你的CSS变得更心动
纯CSS实现简单骨骼动画【实践】
CSS揭秘实用jì巧总结
你未必知道的49个CSS知识点
深入浅出超好用的 CSS 阴影技巧
关于qián端CSS写法104个知识点汇总（一）
关于前端CSS写法104个知识点汇总（二）
前端开发规范：命名规范、html规范、css规范、js规fàn
CSS变量实现暗黑模式，我的小铺页面已经支持
深入浅出CSS中彻底搞懂word-break、word-wrap、white-space
深入浅出详细讲解CSS 渲染原理以及优化策略
手把手教你深入CSS实现一个粒子动效的按钮
手把手教你css 中多种边框的实现小窍mén【实践】
手把手详细教你优化CSS提高网站加载速度的21种方法汇总【实践】
作者：郭世平
转发链接：https://mp.weixin.qq.com/s/f2ZhTN-5R6GOxrJDBrjcVQ
如何制作法达，太阳弧，返照盘
我什么时候会结婚？这是很多女孩子都非常关心的问题。要运用的占星术去回答这个问题也不容易，因为现在社会未婚同居的状况已经非常普遍，大家关心的是事实婚姻呢？还是从“领红本本”那一刻？或者是咱们国家传统的“喝喜酒”那一天？第一种状况比较难以把握，所以不能以它为chū发点去讨论。这里我还是主要从后面两种传统的方法去研究。之前出了一篇看何时走桃花运的文章，里面囊刮了我所了解到的所有占星推运方式，现在这篇文章主要是将问题更具体化来分析。在流年运、月亮次限法、太阳弧、太阳返照包括比较复杂的婚姻点推运，这几个推运的方式我首推太阳返照法，其次流年推运，经过大量的实例及结合一些前辈的理论dé出一些更为详细的参考方法供星迷们参考。看流年运首先还是得判断自己先天命盘是属于早婚还是晚婚的类型，感情发展属于顺利型还是属于多波折型。本命金木调和shì早婚因素之一早婚的先天因素：一是命盘中金星跟木星有调和相位的人基本属于早hūn的类型，他们感情发展普遍比较顺利；二是月亮落入巨蟹座并且落入家庭宫(四宫)或者婚姻宫(七宫)，月亮巨蟹座的人普遍比较爱待在家里，家庭观念比较强，也比较懂得照顾体贴人，很容易吸引到合适的对象，如果落入家庭宫、婚姻宫的话会年纪轻轻就有成家的念头；三是金星跟火星合相落入五宫或者七宫内，这些人桃花比较旺，早恋早婚的概率也很高；四是七宫内有太阳、月亮、金星、mù星落入的并且并无受到凶星刑克的。在这些条件的基础上，你的本命太阳bù能跟土星、海王星、冥王星有合、刑、冲的相位，否则即使符合这些条件也会大打折扣。本命金土、金冥刑克容易晚婚晚婚的先天因素：一是金星跟土星有相位的人，属于晚婚类型，但不代表他们恋爱的晚，只是涉及婚姻大事就会拖得比较迟；二是土星落入七宫内或者土星zài天顶刑下降点的，婚姻也来得晚，波折多；三是三王星，即海王星、天王星、冥王星落入婚姻宫的，尤其靠近下降点，婚姻也容易出现波折；四是月亮星座受凶星刑克严重，如合刑冲土星、冥王星之类的，月亮跟金星有刑相位也比较难进入婚姻，这类人想得比较多，挑挑拣拣到了一定年龄后才会想到找个人安定下来。如果你符合以上早婚或者晚婚条件越多，那么就越应验，如果都不符合，就可能是不早不晚了，到了适婚年龄就会结婚，这里说的早婚指二十五岁之前，晚婚是二十八岁之后。所以有的人在作流年推运的时候往往就只会生搬硬套教条理论，因此结果出来就会差很多。事实上，一般本命盘有显示婚姻不顺利的，大部分流年行运也会与之相呼应，宿命一点说就是天注定的。所谓的知命改命，大都都是从自己性格方面下手，调整自己的心态，就是说在再糟糕的情况xià也能微笑着面对。当然，我一直都在强调，挫折能使人成长！言归正传，太阳返照图jiù是太阳每年回到出生位zhì时的星盘，简单点说就是以你生日那天为分界点来预测到下一年生日这段期间的运程。太阳返照图的制作方法很多教程都已经提到过，这里就不赘述了。太阳返照法推运严格来说要制作三个星盘，一是太阳返照星盘，就是以当年返照的时间来制作的星盘，这个星盘可以当作本命盘来看，但只是管你今年生日到明年生日这一年的运程；二是以本命盘为基本，以当年太阳返照的时间跟本命盘作对比盘；三是以当年太阳返照时间作本命盘，与你出生时间作对比盘单独的返照盘判断婚姻时间有这些方法：一.返照图金星、月亮合四角，土星、海王星、冥王星不强(就是不要在命盘四点附近)。这是最为传统的看法了，也比较准，但也不要高兴得太早，金星除了代表爱情外也代表物质享受等，如果你发现金星合在这两个点上，这一年未必就桃花灿烂，也有可能今年被宴请的机会很多，gēn异性关系改善了而已，我有遇到不少当年金星合轴外，火星、海王星或者天王星等qí它凶星也合轴，那一年的感情经历真是可以写剧本le。二.返照图金星、木星落入婚姻宫，或者合四角；三.返照图月亮、木星合四角，或者落在命盘最高点。以上总结起来就是要多留意金星、月亮、木星在返照图的位置，而且当年凶星都不强，也有金星或者天王星合四轴而发生闪电结婚的事情。至于是年那一段时间发生的概率最高，就要进一步制作月亮返照图来判断了，看看那一个月份这几个星体接近命盘四个角，如果检查下来，发xiàn没有那一个月是比较好的，成婚的机会就不大。本命盘VS返照图的对比参看方法：一. 流年金星跟本命太阳、木星有合、冲相位；二. 流年木星合、冲、三合本命金星；三.流年木星、金星都接近本命四角；四.流年金星合天王星；五.流年土星跟本命金星有和谐相位，合刑冲相位除外。另外返照图VS本命盘的参看方法基本可以同以上的方法一致，不罗嗦了。必须要注意的是，fǎn照图单盘、本命盘VS返照tú必xū结合起来看，这样得出的结果才会比较准确，这其中就要花费大量的时间和精力去分析了，如果不会占星的人zuì好找一个比较有耐心的占星师帮你慢慢检测。
以上就是关于怎么调太阳能时间,怎么通过太阳计算时间的知识，后面我们会继续为大家整理关于太阳弧时间设置的知识，希望能够帮助到大家！
微信扫一扫 
支付宝扫一扫 
