CSS3上下擺動(dòng)效果制作

在CSS3中，我們可以使用@keyframes規(guī)則來創(chuàng)建動(dòng)畫，從而實(shí)現(xiàn)上下擺動(dòng)的效果，以下是一個(gè)簡單的示例：

@keyframes swing {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
.swing-container {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 20px;
}
.swing-container > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 100px;
    width: 100px;
    background-color: #f00;
    border-radius: 50%;
    animation: swing 2s infinite;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為swing的動(dòng)畫，其中包含了三個(gè)關(guān)鍵幀：起始位置、中間位置和結(jié)束位置，我們將這個(gè)動(dòng)畫應(yīng)用到了一個(gè)名為swing-container的容器中，該容器內(nèi)部有一個(gè)名為div的元素，這個(gè)div元素將按照我們定義的動(dòng)畫進(jìn)行上下擺動(dòng)。

這只是一個(gè)簡單的示例，你可以根據(jù)自己的需求進(jìn)行調(diào)整，你可以改變動(dòng)畫的持續(xù)時(shí)間、擺動(dòng)幅度等參數(shù)，以達(dá)到不同的效果，你也可以將動(dòng)畫應(yīng)用到其他元素上，以實(shí)現(xiàn)更多有趣的效果。