本文作者：99ANYc3cd6

html 抖音球形

99ANYc3cd6 01-08 21
html 抖音球形摘要： 基础圆形：一个 div 容器，设置为圆形,并包含用户头像图片，边框效果：一个动态的、有渐变色的边框，通常使用 CSS 的 border 和 box-shadow 来实现，悬停动画：...
  1. 基础圆形：一个 div 容器，设置为圆形,并包含用户头像图片。
  2. 边框效果：一个动态的、有渐变色的边框，通常使用 CSS 的 border 和 box-shadow 来实现。
  3. 悬停动画：当鼠标悬停在头像上时，头像会放大,并可能伴有其他动态效果。
  4. 点击效果：点击头像时，会触发一个波纹扩散的动画,非常经典。

下面我将为你提供一个完整的、可直接运行的 HTML 示例,并详细解释每一部分的代码。

最终效果预览

你会看到一个圆形头像，带有彩色渐变边框和光晕，当鼠标悬停时，它会平滑放大；点击时,会产生一个漂亮的波纹扩散效果。

完整代码

你可以直接将以下代码复制到一个 .html 文件中,然后用浏览器打开即可看到效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">抖音风格球形头像</title>
    <style>
        /* --- 1. 全局样式重置和基础设置 --- */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f2f5; /* 抖音背景色 */
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        /* --- 2. 头像容器 (核心) --- */
        .douyin-avatar {
            position: relative; /* 关键：为内部绝对定位的元素提供定位上下文 */
            width: 120px;
            height: 120px;
            border-radius: 50%; /* 将 div 变成圆形 */
            cursor: pointer;
            overflow: hidden; /* 关键：隐藏超出圆形边框的波纹效果 */
            background-color: #fff; /* 给一个默认背景色，防止图片加载前空白 */
            transition: transform 0.3s ease-in-out; /* 悬停时的放大动画 */
        }
        /* --- 3. 头像图片 --- */
        .douyin-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 确保图片填满圆形区域且不变形 */
            border-radius: 50%; /* 确保图片本身也是圆形 */
        }
        /* --- 4. 动态边框和光晕效果 --- */
        .douyin-avatar::before {
            content: '';
            position: absolute;
            top: -2px; /* 调整边框位置 */
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe, #f093fb);
            background-size: 400% 400%; /* 为动画做准备 */
            border-radius: 50%;
            z-index: -1; /* 将边框放在图片后面 */
            animation: gradient 3s ease infinite; /* 调用渐变动画 */
            filter: blur(5px); /* 模糊边缘，形成光晕效果 */
            opacity: 0.8; /* 调整光晕透明度 */
        }
        /* --- 5. 渐变动画关键帧 --- */
        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        /* --- 6. 悬停效果 --- */
        .douyin-avatar:hover {
            transform: scale(1.05); /* 放大 5% */
        }
        /* --- 7. 波纹效果 (点击时触发) --- */
        .ripple {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.6); /* 半透明白色 */
            transform: scale(0);
            animation: ripple-animation 0.6s linear;
            pointer-events: none; /* 让波纹可以穿透，不影响后续点击 */
        }
        /* --- 8. 波纹动画关键帧 --- */
        @keyframes ripple-animation {
            to {
                transform: scale(4); /* 放大4倍 */
                opacity: 0; /* 逐渐消失 */
            }
        }
    </style>
</head>
<body>
    <!-- 头像容器 -->
    <div class="douyin-avatar" id="avatar">
        <!-- 替换这里为你想要的图片链接 -->
        <img src="https://images.unsplash.com/photo-1557862921-37829c790f19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="用户头像">
    </div>
    <script>
        // 获取头像元素
        const avatar = document.getElementById('avatar');
        // 为头像添加点击事件监听器
        avatar.addEventListener('click', function(e) {
            // 创建一个新的 div 元素作为波纹
            const ripple = document.createElement('div');
            ripple.classList.add('ripple');
            // 获取头像容器的尺寸和位置
            const rect = avatar.getBoundingClientRect();
            // 计算点击位置相对于头像容器左上角的坐标
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;
            // 设置波纹的初始位置和大小
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            // 将波纹元素添加到头像容器中
            avatar.appendChild(ripple);
            // 在动画结束后移除波纹元素，防止内存泄漏
            ripple.addEventListener('animationend', () => {
                ripple.remove();
            });
        });
    </script>
</body>
</html>

代码分步解析

HTML 结构

<div class="douyin-avatar" id="avatar">
    <img src="..." alt="用户头像">
</div>
  • div.douyin-avatar: 这是整个效果的“画布”，我们把它设置成圆形,并在这个容器里进行所有的样式和动画操作。
  • img: 这是头像本身。object-fit: cover 是一个非常重要的属性，它能确保图片在填满圆形区域的同时，保持其原始比例,不会被拉伸或压缩。
  • id="avatar": 给容器一个唯一的 ID，方便 JavaScript 精准地找到它并绑定点击事件。

CSS 样式

  • .douyin-avatar:

    • position: relative;: 这是实现波纹效果的关键，它创建了一个“定位上下文”，这样内部的波纹元素（绝对定位）就可以相对于这个容器进行定位,而不是相对于整个页面。
    • width 和 height: 定义头像的大小。
    • border-radius: 50%: 将正方形容器变成完美的圆形。
    • overflow: hidden: 同样是波纹效果的关键，它确保了当波纹动画放大时，超出圆形边界部分会被“剪掉”,从而只在圆形内部显示。
    • transition: transform ...: 为 transform 属性（如缩放）添加平滑的过渡效果。

  • .douyin-avatar::before (伪元素):

    • content: '': 伪元素必须有 content 属性才能显示。
    • position: absolute;: 让这个“边框”可以相对于 .douyin-avatar 进行精确定位。
    • top/left/right/bottom: -2px;: 通过将四个方向都向外扩展 2px，创建了一个比图片容器稍大的“边框”区域。
    • background: linear-gradient(...): 创建了一个多彩的渐变色。
    • background-size: 400% 400%: 让渐变背景足够大，这样在动画中移动 background-position 时,才能产生平滑的流动效果。
    • animation: gradient 3s ease infinite;: 让渐变背景持续流动起来。
    • filter: blur(5px);: 对渐变边框进行模糊处理，形成柔和的光晕感,这是抖音风格的精髓之一。
    • z-index: -1;: 将这个光晕层放在图片的下方,作为背景装饰。

  • .douyin-avatar:hover:

    • transform: scale(1.05);: 当鼠标悬停时，将头像放大到原始尺寸的 1.05 倍。
    • transition 属性确保了这个放大过程是平滑的,而不是瞬间的。

JavaScript 交互

  • avatar.addEventListener('click', ...):

    监听头像容器的点击事件。

  • const ripple = document.createElement('div');:

    • 每次点击时，动态创建一个新的 div 元素，这个 div 将成为我们的波纹。

  • const rect = avatar.getBoundingClientRect();:

    获取头像元素在视口中的精确位置和尺寸,这是计算波纹起始点坐标的基础。

  • const x = e.clientX - rect.left - size / 2;:

    • e.clientX 是鼠标点击的屏幕 X 坐标。
    • rect.left 是头像容器的屏幕 X 坐标。
    • 两者相减，就得到了鼠标在头像容器内部的 X 坐标。
    • 再减去 size / 2 是为了让波纹的中心对准鼠标点击的位置。

  • avatar.appendChild(ripple);:

    • 将新创建的波纹 div 添加到头像容器中,这样它就会显示出来。

  • ripple.addEventListener('animationend', ...):

    这是一个很好的实践，波纹动画结束后，这个事件会被触发，我们在此时移除波纹元素，避免页面中堆积大量无用的 DOM 元素,导致性能问题。

如何自定义和扩展

  • 更换图片: 只需修改 <img> 标签中的 src 属性即可。
  • 调整大小: 修改 .douyin-avatar 中的 width 和 height,并确保两者相等。
  • 改变颜色: 修改 .douyin-avatar::before 中的 linear-gradient 里的颜色值。
  • 调整动画速度: 修改 animation: gradient 3s ... 中的 3s（边框流动速度）或 transition: transform 0.3s ... 中的 3s（悬停放大速度）。
  • 改变光晕效果: 调整 filter: blur() 的像素值或 opacity 的值。

希望这个详细的解释能帮助你理解并创造出属于自己的抖音风格球形头像！

标签：

文章版权及转载声明

作者:99ANYc3cd6本文地址：https://chumoping.net/post/8390.html发布于 01-08
文章转载或复制请以超链接形式并注明出处初梦运营网

海报
阅读
分享