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

css加鼠標移動背景

傅智翔1年前9瀏覽0評論

CSS加鼠標移動背景是一種很酷炫的效果,可以讓網頁看起來更加生動有趣。下面介紹如何使用CSS實現鼠標移動時背景跟隨移動。

/* HTML部分 */
<div class="box">
<p>這是一段文字</p>
</div>
/* CSS部分 */
.box {
background-image: url('background.jpg');
background-position: center center;
background-size: cover;
height: 200px;
width: 300px;
position: relative;
}
.box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.5);
transition: all 0.3s ease-in-out;
}
.box:hover::before {
background-color: rgba(255, 255, 255, 0);
transform: translate(10px, 10px);
}

以上是實現鼠標移動背景跟隨效果的CSS代碼。其中,使用了偽元素before來添加透明背景層,并使用了 CSS3 過渡(transition)動畫讓背景層在鼠標移動時平滑地變化。同時,還使用了 transform 屬性來控制背景層的移動。