CSS是網頁開發過程中常用的語言,可以用來實現盒子波浪線的特效。下面是制作盒子波浪線的詳細方法。
.box { width: 300px; height: 100px; position: relative; overflow: hidden; border-radius: 20px; background: linear-gradient(to right, #f6d365, #fda085); } .box::before { content: ''; position: absolute; width: 200%; height: 200%; top: 0; left: -50%; background: linear-gradient(to right, #f6d365, #fda085); transform-origin: top center; transform: rotate(45deg); animation: wave 4s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; } @keyframes wave { 0% { transform: rotate(45deg) translate(-100%); } 100% { transform: rotate(45deg) translate(0%); } }
首先定義一個盒子的樣式,設置寬度、高度、相對定位、溢出隱藏、邊框圓角和漸變背景。接著,使用偽元素before來制作波浪線。設置元素內容為空,相對定位,寬高為原來的兩倍,偏移量為負的50%(這是為了控制波浪線的位置)。使用線性漸變背景色,并將元素旋轉45度,之后創建一個動畫,將波浪線沿X軸移動,持續4秒。在樣式中設定關鍵幀,讓波浪線始終向右側移動。這樣就完成了盒子波浪線的制作。