在CSS中畫拋物線的方法如下:
.curve { position: relative; width: 100px; height: 100px; overflow: hidden; } .curve:before { content: ""; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: linear-gradient(to bottom right, transparent 50%, black 0); transform: translateX(-50%); animation: curve 3s infinite ease-out; } @keyframes curve { 0% { transform: translateX(-50%) translateY(0); } 100% { transform: translateX(-50%) translateY(100%); } }
通過創(chuàng)建一個偽元素來模擬拋物線,并使用animation動畫使其移動,從而實現(xiàn)拋物線的效果。需要注意的是,在調(diào)整拋物線的形狀時需要調(diào)整偽元素的寬度、高度以及背景漸變的方向。
上一篇在css中字體加粗屬性
下一篇在css中如何平移圖片