无图标

2023-08-07T15:18:10.png

<!DOCTYPE html>
<html>
<head>
    <title>彩色链接</title>
    <style>
        .link-container {
            display: flex;
            justify-content: space-between;
            width: 600px;
            margin: 0 auto;
        }

        .link {
            text-decoration: none;
            padding: 10px;
            color: #fff;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .link:hover {
            background-color: #f9a825;
        }

        /* 每个链接的颜色 */
        .link-1 {
            background-color: #ff5252;
        }

        .link-2 {
            background-color: #ff4081;
        }

        .link-3 {
            background-color: #e040fb;
        }

        .link-4 {
            background-color: #7c4dff;
        }

        .link-5 {
            background-color: #536dfe;
        }

        .link-6 {
            background-color: #40c4ff;
        }
    </style>
</head>
<body>
    <div class="link-container">
        <a href="#" class="link link-1">链接1</a>
        <a href="#" class="link link-2">链接2</a>
        <a href="#" class="link link-3">链接3</a>
        <a href="#" class="link link-4">链接4</a>
        <a href="#" class="link link-5">链接5</a>
        <a href="#" class="link link-6">链接6</a>
    </div>
</body>
</html>

添加图标

2023-08-07T15:23:52.png

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <title>彩色链接</title>
    <style>
        .link-container {
            display: flex;
            justify-content: space-between;
            width: 600px;
            margin: 0 auto;
        }

        .link {
            text-decoration: none;
            padding: 10px;
            color: #fff;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s ease;
            position: relative; /* 添加相对定位 */
        }

        .link:hover {
            background-color: #f9a825;
        }

        .link i {
            margin-right: 5px;
            transition: transform 0.3s ease; /* 添加旋转过渡效果 */
        }

        .link:hover i {
            transform: rotate(360deg); /* 悬停时旋转图标 */
        }

        /* 每个链接的颜色 */
        .link-1 {
            background-color: #ff5252;
        }

        .link-2 {
            background-color: #ff4081;
        }

        .link-3 {
            background-color: #e040fb;
        }

        .link-4 {
            background-color: #7c4dff;
        }

        .link-5 {
            background-color: #536dfe;
        }

        .link-6 {
            background-color: #40c4ff;
        }
    </style>
</head>
<body>
    <div class="link-container">
        <a href="#" class="link link-1"><i class="fab fa-github"></i>链接1</a>
        <a href="#" class="link link-2"><i class="fab fa-twitter"></i>链接2</a>
        <a href="#" class="link link-3"><i class="fab fa-linkedin"></i>链接3</a>
        <a href="#" class="link link-4"><i class="fab fa-facebook"></i>链接4</a>
        <a href="#" class="link link-5"><i class="fab fa-instagram"></i>链接5</a>
        <a href="#" class="link link-6"><i class="fab fa-youtube"></i>链接6</a>
    </div>

</body>
</html>

添加图片

2023-08-07T15:26:35.png

<!DOCTYPE html>
<html>
<head>
    <title>彩色链接</title>
    <style>
        .link-container {
            display: flex;
            justify-content: space-between;
            width: 900px;
            margin: 0 auto;
        }

        .link {
            text-decoration: none;
            padding: 10px;
            color: #fff;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s ease;
            position: relative;
            display: flex; /* 添加 flex 属性以使图像和文本在同一行 */
            align-items: center; /* 垂直居中对齐图像和文本 */
        }

        .link:hover {
            background-color: #f9a825;
        }

        .link img {
            margin-right: 5px;
            width: 40px;
            height: auto;
            transition: transform 0.3s ease;
        }

        .link:hover img {
            transform: rotate(360deg);
        }

        /* 每个链接的颜色 */
        .link-1 {
            background-color: #ff5252;
        }

        .link-2 {
            background-color: #ff4081;
        }

        .link-3 {
            background-color: #e040fb;
        }

        .link-4 {
            background-color: #7c4dff;
        }

        .link-5 {
            background-color: #536dfe;
        }

        .link-6 {
            background-color: #40c4ff;
        }
    </style>
</head>
<body>
    <div class="link-container">
        <a href="#" class="link link-1"><img src="https://xn--xu0a.cn/favicon.ico"/><span>链接1</span></a>
        <a href="#" class="link link-2"><img src="https://xn--xu0a.cn/favicon.ico"/><span>链接2</span></a>
        <a href="#" class="link link-3"><img src="https://xn--xu0a.cn/favicon.ico"/><span>链接3</span></a>
        <a href="#" class="link link-4"><img src="https://xn--xu0a.cn/favicon.ico"/><span>链接4</span></a>
        <a href="#" class="link link-5"><img src="https://xn--xu0a.cn/favicon.ico"/><span>链接5</span></a>
        <a href="#" class="link link-6"><img src="https://xn--xu0a.cn/favicon.ico"/><span>链接6</span></a>
    </div>
</body>
</html>