[英]CSS - Need to make wave animation with circles. Cannot alter HTML
我必須制作 5 個不同顏色的球的動畫，這些球在波浪中移動。 正如說明所說，我正在努力應對球的不同起始位置。 由於某種原因，第一個孩子的位置和顏色在 5 個球的序列中排在最后。
使用此調色板（指向外部站點的鏈接。）根據上述參考使用圓類設置 div 元素的樣式。 每個圓圈的直徑應為 50px。 實現一個動畫，使圓圈向上移動 100 像素，然后向下移動回它們的原始位置。 運動的持續時間應為 1 秒。 每個球都應該在稍微不同的時間點開始動畫，以便它們看起來稍微不同相。 整體效果是它們看起來像一個無限循環的“波浪”。
這是 HTML
.circle { height: 50px; width: 50px; border-radius: 50%; background-color:antiquewhite; animation: circle 1s linear infinite; float: left; margin: 5px; } .circle:first-child {animation-delay: -0.1s; background: #EF476F} .circle:nth-child(2) {animation-delay: -0.2s; background: #FFD166;} .circle:nth-child(3) {animation-delay: -0.4s; background: #06D6A0;} .circle:nth-child(4) {animation-delay: -0.6s; background: #118AB2;} .circle:nth-child(5) {animation-delay: -0.8s; background: #073B4C;} @keyframes circle { 0%, 100% {transform: translateY(0px);} 50% {transform: translateY(100px);} }
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>CSS Challenges</h1> <section> <h2>Challenge 3</h2> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </section> </body> </html>
你的問題是nth-child() 。 您的第一個圓元素實際上是容器中的第二個子元素，因為第一個子元素是<h2> 。 nth-child()不按類區分，因此此方法不起作用。
但是，在另一個更合適的選擇器nth-of-type()找到了解決方案。 這個選擇器也不能通過類名來區分，但是可以通過元素類型來區分。
.circle { height: 50px; width: 50px; border-radius: 50%; background-color: antiquewhite; animation: circle 1s ease-in-out infinite; /* changed it to ease-in-out just for better visual result */ float: left; margin: 5px; } .circle:nth-of-type(1) { animation-delay: -0.1s; background: #EF476F } .circle:nth-of-type(2) { animation-delay: -0.2s; background: #FFD166; } .circle:nth-of-type(3) { animation-delay: -0.4s; background: #06D6A0; } .circle:nth-of-type(4) { animation-delay: -0.6s; background: #118AB2; } .circle:nth-of-type(5) { animation-delay: -0.8s; background: #073B4C; } @keyframes circle { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(100px); } }
<h1>CSS Challenges</h1> <section> <h2>Challenge 3</h2> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </section>
選擇器將找到具有circle類的元素並找到其類型的nth - 在本例中為div 。 如果添加另一個元素，例如<span class"circle"></span> ，它將獲得.circle:nth-of-type(1)的樣式，因為這是此類的第一個跨度。
CSS - 需要用不同的動畫制作兩個形狀。 無法更改 HTML
[英]CSS - Need to make two shapes with different animations. Cannot alter the HTML
如何在css或javascript（沒有動畫）中使文本上升或波動
[英]How to make a text rise or wave in either css or javascript (no animation)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.