CSS是網頁開發中不可缺少的一部分，它不僅可以實現網頁布局和美化效果，還可以實現一些好玩的動態效果。今天，我們來學習一下如何使用CSS實現占位動效。

.placeholder {
position: relative;
width: 150px;
height: 30px;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
}
.placeholder span {
position: absolute;
top: 0;
left: -150px;
width: 100%;
height: 100%;
background-color: #fff;
animation: slide 2s infinite;
}
@keyframes slide {
0% {
left: -150px;
}
50% {
left: 150px;
}
100% {
left: -150px;
}
}

以上代碼是一個占位動效的實現方法。首先，我們給占位框設置一個相對定位，然后設置寬度、高度、背景顏色、圓角和溢出隱藏。接著，我們給占位框內添加一個span元素，設置絕對定位，將它的left值設為負的占位框寬度，并設置寬度、高度和背景顏色。最后，我們使用@keyframes定義一個名為slide的動畫，將span元素在50%的時候移動到右邊，到100%的時候又回到左邊，將其left屬性變化的過程通過animation屬性，掛載到span元素上。

通過以上代碼的實現，我們可以看到一個具有占位動效的占位框，讓你的頁面更有趣，也更具有交互性。