色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css制作盒子波浪線

阮建安2年前9瀏覽0評論

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秒。在樣式中設定關鍵幀,讓波浪線始終向右側移動。這樣就完成了盒子波浪線的制作。

上一篇seo vue