CSS 技术可以实现鼠标移入图片抖动的效果,给用户带来视觉上的冲击。下面我们通过一些简单的代码实现这个效果。
/*样式规则*/ .image { position: relative; display: inline-block; overflow: hidden; transition: transform 0.3s; transform: scale(1); } .image:hover { transform: scale(1.1); } /*HTML 代码*/ <div class="image"> <img src="img/photo1.jpg" alt="photo1"> </div>
在上面的代码中,我们首先创建了一个类名为 "image" 的样式规则。它设置了图片的 "position" 属性为 "relative",将其 "display" 属性设置为 "inline-block",并将 "overflow" 属性设置为 "hidden"。同时,为了实现抖动的效果,我们使用了 "transform" 属性和 CSS3 的过渡效果 "transition"。
当鼠标移入图片时,我们通过:hover 伪类选择器触发 "transform" 属性中的 "scale" 内置函数。这样就可以使图片在鼠标移入时缩小,从而产生抖动的效果。
在 HTML 代码中,我们创建了一个 div 元素,使用了 "image" 类名,并在其中添加了一个 img 元素。当我们将鼠标移入图片上时,就可以看到这个简单而又炫酷的抖动效果。