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 屬性來控制背景層的移動。
上一篇css加陰影的方法
下一篇jquery lt 用法