CSS3旋轉蛋糕廣州是一種非常流行的CSS3特效之一。通過使用CSS3的旋轉屬性,可以輕松地讓蛋糕在網頁上旋轉起來,給人一種非常炫酷的視覺效果。本文將會介紹如何通過CSS3來實現旋轉蛋糕廣州。
.cake { width: 200px; height: 200px; margin: 50px auto; position: relative; } .cake:before, .cake:after { content: ''; position: absolute; width: 200px; height: 50px; background: #ff7676; border-radius: 0 0 90px 90px; } .cake:before { top: -30px; } .cake:after { bottom: -30px; } .cake__body { position: absolute; top: 50px; left: 0; right: 0; bottom: 50px; background: #fbd786; border-radius: 80px / 50px; transform-origin: 50% 0%; animation: spin 8s infinite linear; } .cake__body:after { content: ''; position: absolute; top: -20px; left: 0; right: 0; bottom: -20px; background: #ffbf4f; border-radius: 70px / 40px; } .cake__cherry { position: absolute; top: -10px; left: 50%; margin-left: -10px; width: 20px; height: 20px; background: #fc3d3d; border-radius: 50%; box-shadow: 0 5px 0 0 #d62e2e; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
上面是CSS樣式代碼,其中,我們設置了一個.cake樣式,用于定義整個蛋糕的大小和位置。接著,我們又定義了.cake:before和.cake:after樣式,這兩個樣式是用于定義蛋糕上下兩端的裝飾物。.cake__body樣式用于定義蛋糕的主體部分,同時也定義了蛋糕的旋轉動畫效果。最后,.cake__cherry樣式定義了蛋糕的櫻桃部分。
通過將這些樣式應用到HTML元素中,我們就可以實現一個非常炫酷的CSS3旋轉蛋糕廣州。如果你也想要讓你的網頁更加炫酷,那么記得多嘗試一些CSS3特效的應用。
上一篇html中渲染vue