沙漏作為一個古老而有文化內涵的物品,在我們的生活中也有很多的體現。那么有沒有想過用純CSS來創作一個沙漏呢?下面我就來分享一下如何使用CSS來制作一個優美的沙漏。
.sandglass { position: relative; width: 0; height: 0; border-top: 50px solid #F6C; border-right: 25px solid transparent; border-left: 25px solid transparent; animation: rotate-left 5s linear infinite; } .sandglass::before, .sandglass::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 25px solid #FFF; border-right: 12.5px solid transparent; border-left: 12.5px solid transparent; } .sandglass::before { border-bottom: 25px solid #F6C; transform: rotate(-60deg); } .sandglass::after { border-bottom: 25px solid #F6C; transform: rotate(60deg); } @keyframes rotate-left { 0% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
以上代碼中,我們首先定義了一個.sandglass的div,并設置了它的border樣式,這里我們使用了CSS3的動畫來模擬沙漏翻轉的效果。然后,在.sandglass中我們使用了偽元素::before和::after來制作沙漏的上下半部分,設置了它們的border樣式并通過transform來調整它們的方向。
最后,我們通過調用rotate-left動畫,讓整個沙漏有一個自轉的效果,同時呈現出翻轉的效果。
經過以上的操作,我們已經成功地使用純CSS來制作了一個優美的沙漏。當然,為了完善這個效果,我們還可以加入一些透明度漸變等特效,讓這個沙漏更加生動有趣。