CSS3 創意分箱設計 | CSS Animation 效果

Question

我正在制作 CSS 盒子設計。 完成后，我看到我的網站在下方不斷上下移動，然后我看到我的背景顏色有 2，但在底部只有一點點。 當我嘗試刪除編碼@keyframes 動畫時，我的網站停止移動和向下移動。 你能幫我在 CSS 文件中編碼嗎

 .square { position: relative; height: 400px; width: 400px; display: flex; justify-content: center; align-items: center; }.square span:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid rgb(228, 43, 73); border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: animate 6s linear infinite; }.square:hover span:nth-child(1) { border: none; background: rgb(233, 112, 132); }.square span:nth-child(2) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid rgb(228, 43, 73); border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: animate 4s linear infinite; }.square:hover span:nth-child(2) { border: none; background: rgb(233, 112, 132); }.square span:nth-child(3) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid rgb(228, 43, 73); border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: animate2 10s linear infinite; }.square:hover span:nth-child(3) { border: none; background: rgb(233, 112, 132); } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate2 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }.content1 { position: relative; padding: 40px 60px; color: black; text-align: center; transition: 0.5s; z-index: 1000; }

 <div class="square"> <span></span> <span></span> <span></span> <div class="content1"> <p>“My friend, Elizabeth Shealy, owns this one room spa and I left her little oasis just this morning. If you have ever spotted a coffee shop off the beaten track or a cafe in an unexpected area, you know the feeling of finding a gem that perhaps no one else in the city knows about. Elizabeth's nook is that sort of find. Its as if you're in another part of the world-it has a different kind of feel.”</p> </div> </div>

我希望我能很快得到我的作業反饋

Answer 1

對於您的情況，最好的方法是控制您的寬度和高度並減少它們的值或制作一個框並在父 div 中使用overflow:hidden ，因為您為它們設置絕對 position 的邊框，它們在您的頁面中更大。

注意：如果您想在此代碼下方添加更多內容或在其上方有內容，請為此 div 使用overflow-x:hidden ，如果它不起作用，請為您的 body 標簽使用overflow-x:hidden 。

對不起我的語法。

 body{ /*overflow-x:hidden*/ }.square{ position: relative; height: 400px; width: 400px;/*if using overflow-x for body set width to 100vw or if use overflow:hidden for.square set width to 400px*/ display: flex; justify-content: center; align-items: center; overflow: hidden; }.square span:nth-child(1){ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid rgb(228, 43, 73); border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: animate 6s linear infinite; }.square:hover span:nth-child(1){ border: none; background: rgb(233, 112, 132); }.square span:nth-child(2){ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid rgb(228, 43, 73); border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: animate 4s linear infinite; }.square:hover span:nth-child(2){ border: none; background: rgb(233, 112, 132); }.square span:nth-child(3){ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid rgb(228, 43, 73); border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: animate2 10s linear infinite; }.square:hover span:nth-child(3){ border: none; background: rgb(233, 112, 132); } @keyframes animate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } @keyframes animate2{ 0%{ transform: rotate(360deg); } 100%{ transform: rotate(0deg); } }.content1{ position: relative; padding: 40px 60px; color: black; text-align: center; transition: 0.5s; z-index: 1000; }

 <div class="square"> <span></span> <span></span> <span></span> <div class="content1"> <p>“My friend, Elizabeth Shealy, owns this one room spa and I left her little oasis just this morning. If you have ever spotted a coffee shop off the beaten track or a cafe in an unexpected area, you know the feeling of finding a gem that perhaps no one else in the city knows about. Elizabeth's nook is that sort of find. Its as if you're in another part of the world-it has a different kind of feel.”</p> </div> </div>