用CSS3實現太陽系效果（“前端”小球不動），如何使其中的文字相對用戶不旋轉（效果如圖），我的思路是讓里面的文字也相對小球旋轉，一開始文字都是逆時針旋轉的，神奇的是“HTML”小球正常，但是另外兩個小球中的文字還在相對用戶旋轉，然后我把這兩個文字的旋轉方向改為順時針旋轉（小球都是順時針繞圈的）居然相對用戶靜止了（就是文字一直正立顯示）！小白表示百思不得其解，求大神解答！完整代碼如下（重點在.info123,另外也歡迎提出代碼優化建議，再次感謝）：<!DOCTYPE?html><html?lang="en"><head>
????<meta?charset="UTF-8">
????<title>css3?winding</title>
????<style>
????#container?{????????width:?1000px;????????height:?600px;????????border:?2px?solid?#0F80FF;????????position:?relative;????}
????
????#ball0?{????????position:?absolute;????????height:?80px;????????width:?80px;????????left:?50%;????????top:?50%;????????transform:?translate(-50%,?-50%);????????background-color:?#746DFF;????????border-radius:?50%;????????text-align:?center;????}
????
????#ball1?{????????position:?absolute;????????height:?60px;????????width:?60px;????????left:?60%;????????top:?50%;????????transform:?translate(-50%,?-50%)?rotate(0);????????background-color:?#ddd;????????border-radius:?50%;????????transform-origin:?-116.7%?50%;????????animation:?rotate_ball1?6s?linear?infinite;????????text-align:?center;????}
????
????#ball2?{????????position:?absolute;????????height:?60px;????????width:?60px;????????left:?70%;????????top:?50%;????????transform:?translate(-50%,?-50%)?rotate(120deg);????????background-color:?#ddd;????????border-radius:?50%;????????transform-origin:?-283.3%?50%;????????animation:?rotate_ball2?10s?linear?infinite;????????text-align:?center;????}
????
????#ball3?{????????position:?absolute;????????height:?60px;????????width:?60px;????????left:?80%;????????top:?50%;????????transform:?translate(-50%,?-50%)?rotate(240deg);????????background-color:?#ddd;????????border-radius:?50%;????????transform-origin:?-450%?50%;????????animation:?rotate_ball3?14s?linear?infinite;????????text-align:?center;????}
????
????.info0?{????????display:?block;????????padding:?32px?0;????}
????
????.info1?{????????display:?block;????????padding:?22px?0;????????animation:?rotate_info1?6s?linear?infinite?reverse;????}
????
????.info2?{????????display:?block;????????padding:?22px?0;????????transform:?rotate(-120deg);????????animation:?rotate_info2?10s?linear?infinite?;????}
????
????.info3?{????????display:?block;????????padding:?22px?0;????????transform:?rotate(-240deg);????????animation:?rotate_info3?14s?linear?infinite?;????}
????
????#ball1:hover?{????????animation-play-state:?paused;????}
????
????#ball1:hover?.info1?{????????animation-play-state:?paused;????}
????
????#ball2:hover?{????????animation-play-state:?paused;????}
????
????#ball2:hover?.info2?{????????animation-play-state:?paused;????}
????
????#ball3:hover?{????????animation-play-state:?paused;????}
????
????#ball3:hover?.info3?{????????animation-play-state:?paused;????}
????
????@keyframes?rotate_ball1?{????????to?{????????????transform:?translate(-50%,?-50%)?rotate(1turn);????????}
????}????
????@keyframes?rotate_ball2?{????????to?{????????????transform:?translate(-50%,?-50%)?rotate(480deg);????????}
????}????
????@keyframes?rotate_ball3?{????????to?{????????????transform:?translate(-50%,?-50%)?rotate(600deg);????????}
????}????
????@keyframes?rotate_info1?{????????to?{????????????transform:?rotate(1turn);????????}
????}????
????@keyframes?rotate_info2?{?
????????to?{????????????transform:?rotate(-480deg);????????}
????}????
????@keyframes?rotate_info3?{
????????to?{????????????transform:?rotate(-600deg);????????}
????}????</style></head><body>
????<div?id="container">
????????<div?id="ball0"><span?class='info0'>前端</span></div>
????????<div?id="ball1"><span?class="info1">HTML</span></div>
????????<div?id="ball2"><span?class="info2">CSS</span></div>
????????<div?id="ball3"><span?class="info3">JS</span></div>
????</div></body></html>
2 回答
一笑莫白
TA貢獻8條經驗 獲得超7個贊
.info1 {
? ?display: block;
? ?padding: 22px 0;
? ?animation: rotate_info1 6s linear infinite reverse;
}
.info2 {
? ?display: block;
? ?padding: 22px 0;
? ?transform: rotate(-120deg);
? ?animation: rotate_info2 10s linear infinite reverse;
}
.info3 {
? ?display: block;
? ?padding: 22px 0;
? ?transform: rotate(-240deg);
? ?animation: rotate_info3 14s linear infinite reverse;
}
是這個效果嗎
-
m慕光我之前是怎么寫的 但是后面兩個文字還在旋轉
- 2 回答
- 0 關注
- 1526 瀏覽
添加回答
舉報
0/150
提交
取消