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

css弄一個向上箭頭

林雅南2年前10瀏覽0評論
使用CSS弄一個向上的箭頭 如果你需要在網(wǎng)站上創(chuàng)建一個向上的箭頭,用來提示用戶向上滑動,那么這是非常容易做到的。只需要使用一點點CSS,你就可以創(chuàng)建出一個精美的、滑動優(yōu)雅的箭頭。 下面就是一個簡單的CSS代碼示例,用來創(chuàng)建這個箭頭:
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #666;
position: fixed;
bottom: 20px;
left: 50%;
margin-left: -10px;
animation: arrow 2s infinite ease-in-out;
}
@keyframes arrow {
0% {
opacity: 1;
bottom: 20px;
}
100% {
opacity: 0;
bottom: 40px;
}
}
代碼中的這個箭頭是一個倒三角,通過向下的白色箭頭,給人一種向上滑動的提示。它是一個fixed的元素,所以它會一直在頁面上滑動,直到頁面結(jié)尾。 這個箭頭是一個CSS動畫,通過opacity和bottom屬性,在2秒內(nèi)把箭頭從20px的位置向下移動,直到它變透明了。 如果你想創(chuàng)建一個向上箭頭,只需要改變一下CSS代碼即可。下面是一個簡單的向上箭頭CSS代碼示例:
.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #666;
position: fixed;
bottom: 20px;
left: 50%;
margin-left: -10px;
animation: arrow-up 2s infinite ease-in-out;
}
@keyframes arrow-up {
0% {
opacity: 1;
bottom: 20px;
}
100% {
opacity: 0;
bottom: 40px;
}
}
代碼中的這個箭頭是一個上三角,通過向上的黑色箭頭,向用戶提示向上滑動。它使用和向下箭頭相同的CSS屬性,只是把border-bottom改為了border-top。 通過這些CSS代碼,你可以創(chuàng)建一個非常實用和漂亮的箭頭,用來提示用戶滑動頁面。這對于追求用戶體驗的網(wǎng)站來說,是一項必不可少的任務。