0
我試圖重新創建谷歌使用了幾個小時的這種過渡,但我真的不知道如何去做。我所說的轉換是從左到右變成2px厚度的搜索欄底部。所以:From,以2px的邊界底部有一個很好的過渡。 https://material.google.com/style/icons.html#像谷歌材料網站的CSS過渡動畫
我試圖重新創建谷歌使用了幾個小時的這種過渡,但我真的不知道如何去做。我所說的轉換是從左到右變成2px厚度的搜索欄底部。所以:From,以2px的邊界底部有一個很好的過渡。 https://material.google.com/style/icons.html#像谷歌材料網站的CSS過渡動畫
這是通過搜索標籤的:after
- 僞元素來完成:
這種轉變的實時預覽上可以找到。這是它的CSS:
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.87);
bottom: 0px;
content: '';
height: 2px;
width: 10px;
left: 45%;
position: absolute;
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
visibility: hidden;
當你專注於中,以下CSS應用:
left: 0;
width: 100%;
visibility: visible;
這給了你正在尋找的「中心化」的動畫。如果需要,我可以製作小提琴以演示效果。
編輯: 有一個小提琴:https://jsfiddle.net/tf084pd1/ 下面是與「雙邊框」效果:https://jsfiddle.net/tf084pd1/1/
感謝這個信息!你真的幫我解決了我的掙扎。 – Nukeroni
在這種情況下,請將答案標記爲已接受並給予贊成。 – NikxDa