离子图标悬停效果

离子图标（Ionic Icons）是一个基于Web的图标库，提供了大量的矢量图标，适用于各种前端项目。这些图标使用SVG格式，因此可以很容易地调整大小和颜色，而不失真。

基础概念

离子图标悬停效果是指当用户将鼠标悬停在图标上时，图标会改变颜色或执行其他视觉效果。这种效果可以增强用户体验，使界面更加动态和互动。

类型

颜色变化：图标在悬停时改变颜色。
缩放效果：图标在悬停时放大或缩小。
动画效果：图标在悬停时执行复杂的动画。

应用场景

网页导航栏
按钮
列表项
工具提示

示例代码

以下是一个简单的示例，展示如何使用CSS实现离子图标悬停时的颜色变化效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ionicons Hover Effect</title>
    <link href="https://cdn.jsdelivr.net/npm/@ionic/core@5.0.0/css/ionic.bundle.min.css" rel="stylesheet">
    <style>
        .icon {
            font-size: 3rem;
            color: #333;
            transition: color 0.3s ease;
        }
        .icon:hover {
            color: #007bff;
        }
    </style>
</head>
<body>
    <ion-icon class="icon" name="heart"></ion-icon>
</body>
</html>