CSS经常被用来控制网站的外观和行为。其中,图片的鼠标悬浮高亮是一个常见的特效,可以使网页更加生动、有趣。
/*CSS代码*/ img:hover { border: 2px solid #f1c40f; transform: scale(1.1); transition: all ease-in-out 0.3s; }
上面的代码展示了一个非常简单的遵从CSS盒模型的基本形式。它使用CSS3的伪类:hover
去改变图片的样式,当鼠标悬停在图片上时会应用CSS样式。
其中border
添加了黄色2像素的边框,transform: scale(1.1);
放大1.1倍,transition: all ease-in-out 0.3s;
添加一个动画过渡。如果你想一个不同的抖动效果,可以改变transition
属性的值。
需要注意的是,scale()
属性改变了图片的大小,从而会改变其布局位置。如果图片与周围兄弟元素的相对大小关系很重要,请尝试其他特效。
总的来说,对于图片鼠标悬浮高亮这个特效,代码还是很简单易懂的。使用CSS3中的伪类:hover
配合其他CSS属性实现。通过改变CSS属性值,我们可以获得不同的动画过渡效果。