当先锋百科网

首页 1 2 3 4 5 6 7

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 元素。当我们将鼠标移入图片上时,就可以看到这个简单而又炫酷的抖动效果。