在網頁設計中,鏈接是連接網站內外不同頁面的一個很重要的元素,因此制作鏈接的方法也非常重要。下面將介紹如何用CSS制作鏈接的視頻。
.video-link { display: inline-block; position: relative; text-decoration: none; overflow: hidden; } .video-link::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 0.2s ease-in-out; } .video-link:hover::before { opacity: 1; } .video-link img { max-width: 100%; height: auto; transition: transform 0.2s ease-in-out; } .video-link:hover img { transform: scale(1.2); }
以上代碼中,首先為鏈接設置一個inline-block的display屬性,使得它能夠與其他文本共處一行。接著,在鏈接上方設置一個偽元素,通過設置其position屬性為絕對位置實現覆蓋效果,并為其設置過渡效果。當鼠標懸停在鏈接上時,通過給偽元素opacity屬性賦值1來實現遮罩層的出現。為了使鼠標懸停在鏈接上時圖片有一個放大的效果,通過給圖片設置過渡效果并在hover狀態下使其scale實現。
上一篇mysql 索引例子