html抖音界面

99ANYc3cd6 今天 1

默认

摘要： 我来为你创建一个仿抖音风格的HTML界面，包含短视频浏览、互动功能等核心元素：<!DOCTYPE html><html lang="zh-CN"...

我来为你创建一个仿抖音风格的HTML界面，包含短视频浏览、互动功能等核心元素：

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">抖音</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: #000;
            color: white;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            overflow: hidden;
        }
        .video-container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: #000;
        }
        .video-player {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .video-info {
            position: absolute;
            bottom: 100px;
            left: 20px;
            right: 20px;
            z-index: 10;
        }
        .author-info {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .author-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin-right: 12px;
            border: 2px solid white;
        }
        .author-name {
            font-size: 16px;
            font-weight: 600;
        }
        .follow-btn {
            background: #fe2c55;
            color: white;
            padding: 6px 20px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            margin-left: auto;
        }
        .video-description {
            font-size: 14px;
            line-height: 1.4;
            margin-bottom: 20px;
            max-width: 300px;
        }
        .action-buttons {
            position: absolute;
            right: 20px;
            bottom: 160px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
        }
        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .action-btn:active {
            transform: scale(0.9);
        }
        .action-icon {
            font-size: 48px;
            color: white;
        }
        .action-icon.liked {
            color: #fe2c55;
        }
        .action-count {
            font-size: 14px;
            font-weight: 600;
        }
        .comments-section {
            position: absolute;
            left: 20px;
            bottom: 100px;
            max-width: 300px;
        }
        .comment {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            animation: slideIn 0.3s ease-out;
        }
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .comment-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .comment-content {
            background: rgba(255, 255, 255, 0.1);
            padding: 8px 12px;
            border-radius: 16px;
            font-size: 14px;
        }
        .bottom-nav {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            padding: 8px 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 8px 16px;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .nav-item:active {
            opacity: 0.6;
        }
        .nav-icon {
            font-size: 24px;
            color: white;
        }
        .nav-text {
            font-size: 12px;
            color: white;
        }
        .upload-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            display: none;
            z-index: 100;
            align-items: center;
            justify-content: center;
        }
        .upload-content {
            text-align: center;
            padding: 40px;
        }
        .upload-btn {
            background: #fe2c55;
            color: white;
            padding: 16px 48px;
            border-radius: 30px;
            font-size: 18px;
            font-weight: 600;
            margin: 20px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .upload-btn:active {
            transform: scale(0.95);
        }
        .close-upload {
            position: absolute;
            top: 40px;
            right: 40px;
            font-size: 36px;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="video-container" id="videoContainer">
        <!-- 视频播放器 -->
        <video class="video-player" id="videoPlayer" autoplay muted loop>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
        <!-- 视频信息 -->
        <div class="video-info">
            <div class="author-info">
                <img src="https://picsum.photos/seed/author1/100/100.jpg" alt="作者头像" class="author-avatar">
                <span class="author-name">抖音达人</span>
                <button class="follow-btn">关注</button>
            </div>
            <p class="video-description">这是一条精彩的短视频内容，展示了生活中的美好瞬间 #生活 #美好 #日常</p>
        </div>
        <!-- 互动按钮 -->
        <div class="action-buttons">
            <div class="action-btn" id="likeBtn">
                <i class="fas fa-heart action-icon" id="likeIcon"></i>
                <span class="action-count" id="likeCount">12.3万</span>
            </div>
            <div class="action-btn">
                <i class="fas fa-comment action-icon"></i>
                <span class="action-count">3.2万</span>
            </div>
            <div class="action-btn">
                <i class="fas fa-share action-icon"></i>
                <span class="action-count">分享</span>
            </div>
            <div class="action-btn">
                <i class="fas fa-music action-icon"></i>
                <span class="action-count">音乐</span>
            </div>
        </div>
        <!-- 评论区域 -->
        <div class="comments-section" id="commentsSection">
            <div class="comment">
                <img src="https://picsum.photos/seed/user1/100/100.jpg" alt="用户头像" class="comment-avatar">
                <div class="comment-content">太棒了！👍</div>
            </div>
            <div class="comment">
                <img src="https://picsum.photos/seed/user2/100/100.jpg" alt="用户头像" class="comment-avatar">
                <div class="comment-content">喜欢这个风格</div>
            </div>
        </div>
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item">
                <i class="fas fa-home nav-icon"></i>
                <span class="nav-text">首页</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-compass nav-icon"></i>
                <span class="nav-text">发现</span>
            </div>
            <div class="nav-item" id="uploadBtn">
                <i class="fas fa-plus-circle nav-icon" style="font-size: 36px;"></i>
                <span class="nav-text">上传</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-comment-dots nav-icon"></i>
                <span class="nav-text">消息</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-user nav-icon"></i>
                <span class="nav-text">我</span>
            </div>
        </div>
    </div>
    <!-- 上传弹窗 -->
    <div class="upload-overlay" id="uploadOverlay">
        <div class="close-upload" id="closeUpload">×</div>
        <div class="upload-content">
            <i class="fas fa-video" style="font-size: 64px; color: #fe2c55; margin-bottom: 20px;"></i>
            <h2 style="font-size: 24px; margin-bottom: 10px;">上传视频</h2>
            <p style="color: #999; margin-bottom: 30px;">分享你的精彩瞬间</p>
            <button class="upload-btn">选择视频</button>
            <button class="upload-btn" style="background: #333;">拍摄视频</button>
        </div>
    </div>
    <script>
        // 点赞功能
        const likeBtn = document.getElementById('likeBtn');
        const likeIcon = document.getElementById('likeIcon');
        const likeCount = document.getElementById('likeCount');
        let isLiked = false;
        let currentLikes = 123000;
        likeBtn.addEventListener('click', function() {
            isLiked = !isLiked;
            if (isLiked) {
                likeIcon.classList.add('liked');
                currentLikes++;
                // 添加点赞动画
                likeIcon.style.animation = 'pulse 0.3s ease-out';
            } else {
                likeIcon.classList.remove('liked');
                currentLikes--;
            }
            updateLikeCount();
        });
        function updateLikeCount() {
            if (currentLikes >= 10000) {
                likeCount.textContent = (currentLikes / 10000).toFixed(1) + '万';
            } else {
                likeCount.textContent = currentLikes.toString();
            }
        }
        // 上传功能
        const uploadBtn = document.getElementById('uploadBtn');
        const uploadOverlay = document.getElementById('uploadOverlay');
        const closeUpload = document.getElementById('closeUpload');
        uploadBtn.addEventListener('click', function() {
            uploadOverlay.style.display = 'flex';
        });
        closeUpload.addEventListener('click', function() {
            uploadOverlay.style.display = 'none';
        });
        // 添加评论功能
        const comments = [
            { avatar: 'user3', text: '太精彩了！' },
            { avatar: 'user4', text: '学到了' },
            { avatar: 'user5', text: '支持一下' }
        ];
        let commentIndex = 0;
        function addComment() {
            if (commentIndex >= comments.length) commentIndex = 0;
            const comment = comments[commentIndex];
            const commentsSection = document.getElementById('commentsSection');
            const newComment = document.createElement('div');
            newComment.className = 'comment';
            newComment.innerHTML = `
                <img src="https://picsum.photos/seed/${comment.avatar}/100/100.jpg" alt="用户头像" class="comment-avatar">
                <div class="comment-content">${comment.text}</div>
            `;
            commentsSection.appendChild(newComment);
            // 限制评论数量
            if (commentsSection.children.length > 5) {
                commentsSection.removeChild(commentsSection.firstChild);
            }
            commentIndex++;
        }
        // 每3秒添加一条新评论
        setInterval(addComment, 3000);
        // 添加点赞动画样式
        const style = document.createElement('style');
        style.textContent = `
            @keyframes pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.3); }
                100% { transform: scale(1); }
            }
        `;
        document.head.appendChild(style);
        // 关注按钮功能
        const followBtn = document.querySelector('.follow-btn');
        let isFollowing = false;
        followBtn.addEventListener('click', function() {
            isFollowing = !isFollowing;
            if (isFollowing) {
                followBtn.textContent = '已关注';
                followBtn.style.background = '#333';
            } else {
                followBtn.textContent = '关注';
                followBtn.style.background = '#fe2c55';
            }
        });
    </script>
</body>
</html>

这个抖音界面包含了以下核心功能：