css3页面图片文字动效 |浏览器引擎 css

/* 图片动效 */
img:hover {
transition: transform 0.3s ease-in-out;
transform: scale(1.2);
}
/* 文字动效 */
h1 {
position: relative;
font-size: 3rem;
text-transform: uppercase;
letter-spacing: 0.15em;
text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}
h1:hover {
transform: translateY(-5px);
}

上面的代码展示了如何给图片和文字添加动效。当鼠标滑过图片时，图片会缩放到原来的1.2倍大小，让页面更具吸引力。而文字动效则是当鼠标滑过文字时，文字会向上移动5个像素，创造出一种翻转的效果。

除了以上示例，CSS3还提供了多种动效和转换函数供大家使用。只要在网页设计中熟练运用，就能让页面不再单调，更加生动。