CSS實(shí)現(xiàn)鐘擺動(dòng)畫的方法

.clock {
position: relative;
width: 100px;
height: 150px;
transform-origin: 50% 0%;
animation: swing 2s ease-in-out infinite;
}
.clock:after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 60px;
margin-left: -2px;
background-color: black;
transform-origin: 50% 0%;
animation: rotate 2s ease-in-out infinite;
}
@keyframes swing {
0% {
transform: rotate(30deg);
}
50% {
transform: rotate(-30deg);
}
100% {
transform: rotate(30deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(20deg);
}
100% {
transform: rotate(0deg);
}
}

上述代碼中，我們定義了一個(gè)名為.clock的元素，它是一個(gè)矩形，并通過(guò)設(shè)置transform-origin屬性，將其旋轉(zhuǎn)的中心點(diǎn)設(shè)置在了矩形的頂部中心。然后，我們?yōu)樵撛囟x了一個(gè)動(dòng)畫，名稱為swing，它使元素沿著水平方向擺動(dòng)。

另外，我們還使用了一個(gè)偽元素:after，它代表該元素的鐘擺。我們?yōu)樵撛囟x了一個(gè)名為rotate的動(dòng)畫，使它沿著其頂部中心旋轉(zhuǎn)。

通過(guò)這兩個(gè)動(dòng)畫的設(shè)置，我們實(shí)現(xiàn)了一個(gè)簡(jiǎn)單而有趣的鐘擺動(dòng)畫效果。