HTML+CSS项目实践三：鼠标悬浮在图片上时，图片有一个简单动画效果（放大、旋转等）

逍遥小丸子

于 2018-12-20 16:59:28 发布

阅读量1.9w

点赞数 9

分类专栏： HTML+CSS网页设计

版权

43 篇文章 ¥19.90 ¥99.00

订阅专栏

这篇博客介绍了如何使用CSS3的transform和transition属性，当鼠标悬浮在图片上时，实现图片放大并旋转的动画效果。通过给图片的<a>标签添加样式，利用伪类选择器和transform的旋转、缩放功能，结合transition的过渡设置，创建出平滑的动画过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识点：CSS3 transform 属性、transition属性

实现效果：

效果说明：一排图片大小一致，当鼠标放在任一图片上时，图片放大并且旋转。

制作思路：

1、给图片添加<a>标签，利用伪类选择器实现

2、设置鼠标悬浮在a标签上时，添加动画属性。

3、主要用到属性：transform 属性（给图片进行变形），transition属性（过渡设置）

实现代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鼠标悬浮在图片上，图片有放大

了解本专栏