标签 HTML 下的文章 - 第 3 页 - 白泽博客

登录 / 注册

找到 8 篇与 HTML 相关的结果 - 第 3 页

2025-03-20
联系卡片单页纯html好看简洁图片 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>联系我</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <style> body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: #f5f5f7; margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; } /* 个人信息样式 */ .user-profile { background: white; padding: 24px; margin-bottom: 20px; border-radius: 16px; width: 100%; max-width: 600px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); display: flex; align-items: center; gap: 20px; } .avatar { width: 80px; height: 80px; border-radius: 50%; border: 2px solid #f0f0f0; object-fit: cover; } .profile-info { flex: 1; } .nickname { font-size: 22px; color: #1d1d1f; margin: 0 0 4px 0; font-weight: 600; } .bio { color: #86868b; font-size: 15px; margin: 0 0 12px 0; } .tech-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { background: #f5f5f7; padding: 6px 12px; border-radius: 20px; font-size: 13px; color: #1d1d1f; } /* 联系方式样式 */ .contact-list { width: 100%; max-width: 600px; } .contact-link { display: block; text-decoration: none; color: inherit; } .contact-item { background: white; padding: 16px; margin: 8px 0; border-radius: 12px; display: flex; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.1s ease; } .contact-item:active { transform: scale(0.98); background-color: #f8f8f8; } .icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 16px; } /* 平台品牌色 */ .qq { background-color: #12B7F5; } /* QQ蓝 */ .wechat { background-color: #07C160; } /* 微信绿 */ .douyin { background-color: #000000; } /* 抖音黑 */ .weibo { background-color: #E6162D; } /* 微博红 */ .zhihu { background-color: #0084FF; } /* 知乎蓝 */ .content { flex-grow: 1; } .platform { font-size: 17px; color: #1d1d1f; font-weight: 500; } .account { font-size: 15px; color: #86868b; margin-top: 2px; } </style> </head> <body>  <div class="user-profile"> <img src="http://q.qlogo.cn/headimg_dl?dst_uin=123456&spec=640&img_type=jpg" class="avatar" alt="用户头像"> <div class="profile-info"> <h2 class="nickname">Yi</h2> <p class="bio">探索数字世界的无限可能</p> <div class="tech-tags"> <span class="tag">Python</span> <span class="tag">JavaScript</span> <span class="tag">Golang</span> <span class="tag">Vue3</span> </div> </div> </div>  <div class="contact-list">  <a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=123456789" class="contact-link"> <div class="contact-item"> <div class="icon qq"> <i class="fab fa-qq" style="font-size: 20px; color: white;"></i> </div> <div class="content"> <div class="platform">QQ</div> <div class="account">123456789</div> </div> </div> </a>  <a href="weixin://" class="contact-link"> <div class="contact-item"> <div class="icon wechat"> <i class="fab fa-weixin" style="font-size: 20px; color: white;"></i> </div> <div class="content"> <div class="platform">微信</div> <div class="account">TechMaster2023</div> </div> </div> </a>  <a href="https://www.douyin.com/user/your_douyin_id" class="contact-link" target="_blank"> <div class="contact-item"> <div class="icon douyin"> <i class="fab fa-tiktok" style="font-size: 20px; color: white;"></i> </div> <div class="content"> <div class="platform">抖音</div> <div class="account">@coding_life</div> </div> </div> </a>  <a href="https://weibo.com/u/your_weibo_id" class="contact-link" target="_blank"> <div class="contact-item"> <div class="icon weibo"> <i class="fab fa-weibo" style="font-size: 20px; color: white;"></i> </div> <div class="content"> <div class="platform">微博</div> <div class="account">@TechGeek</div> </div> </div> </a>  <a href="https://www.zhihu.com/people/your_zhihu_id" class="contact-link" target="_blank"> <div class="contact-item"> <div class="icon zhihu"> <i class="fab fa-zhihu" style="font-size: 20px; color: white;"></i> </div> <div class="content"> <div class="platform">知乎</div> <div class="account">全栈工程师</div> </div> </div> </a> </div> </body> </html>

游戏 # 源码 # PHP # HTML

白泽 3月20日
0 3 0
2025-03-20
毛玻璃简约随机小姐姐短视频源码可复制代码植入自己网站就单纯一个 html 代码内置 API 接口自己可替换接口，小白也能看懂哦还需要什么简约代码评论留言代码效果在最底下滑就可以看到 <!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>短视频</title> <style> :root { --primary-color: #ff6b6b; --secondary-color: #4ecdc4; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #fff; min-height: 100vh; } .app-container { max-width: 600px; margin: 0 auto; padding: 20px; position: relative; } .video-wrapper { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); background: #000; margin-top: 30px; aspect-ratio: 9/16; } #video-element { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; } .decorative-border { position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px; border: 3px solid var(--primary-color); border-radius: 30px; opacity: 0.3; pointer-events: none; } .floating-controls { position: absolute; bottom: 30px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: flex-end; } .control-group { display: flex; flex-direction: column; gap: 20px; } .control-btn { background: rgba(255, 255, 255, 0.1); border: none; width: 50px; height: 50px; border-radius: 15px; backdrop-filter: blur(10px); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .control-btn:hover { transform: scale(1.1); background: rgba(255, 255, 255, 0.2); } .control-btn i { font-size: 24px; color: #fff; } .like-btn.active i { color: var(--primary-color); animation: pulse 0.5s; } .user-info { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--secondary-color); } .loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; color: var(--primary-color); display: none; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .floating-text { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); color: var(--secondary-color); font-weight: bold; animation: float 2s infinite; } @media (max-width: 480px) { .app-container { padding: 10px; } .video-wrapper { margin-top: 20px; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="app-container"> <div class="floating-text">每日推荐精彩视频</div> <div class="video-wrapper"> <div class="decorative-border"></div> <video id="video-element" playsinline autoplay muted></video> <div class="user-info"> <img src="https://www.yy0228.cn/wp-content/uploads/2025/02/3e63199b7620250214164841-scaled.jpg" class="user-avatar" alt="用户头像"> <div class="control-btn"> <i class="fas fa-ellipsis-h"></i> </div> </div> <div class="floating-controls"> <div class="control-group"> <button class="control-btn like-btn" onclick="toggleLike()"> <i class="far fa-heart"></i> </button> <button class="control-btn" onclick="shareVideo()"> <i class="fas fa-share"></i> </button> </div> <div class="control-group"> <button class="control-btn" onclick="togglePlay()"> <i class="fas fa-pause"></i> </button> <button class="control-btn" onclick="nextVideo()"> <i class="fas fa-forward"></i> </button> </div> </div> </div> <div class="loading-spinner"> <i class="fas fa-spinner fa-spin"></i> </div> </div> <script> const videoElement = document.getElementById('video-element'); let isLiked = false; // 直接使用API地址作为视频源 videoElement.src = 'https://api.dwo.cc/api/video?v=xd'; videoElement.addEventListener('waiting', () => { document.querySelector('.loading-spinner').style.display = 'block'; }); videoElement.addEventListener('playing', () => { document.querySelector('.loading-spinner').style.display = 'none'; }); function toggleLike() { isLiked = !isLiked; const likeBtn = document.querySelector('.like-btn'); likeBtn.classList.toggle('active'); if (isLiked) { likeBtn.innerHTML = '<i class="fas fa-heart"></i>'; } else { likeBtn.innerHTML = '<i class="far fa-heart"></i>'; } } function togglePlay() { const btn = document.querySelector('.fa-pause'); if (videoElement.paused) { videoElement.play(); btn.classList.remove('fa-play'); btn.classList.add('fa-pause'); } else { videoElement.pause(); btn.classList.remove('fa-pause'); btn.classList.add('fa-play'); } } function nextVideo() { videoElement.src = 'https://api.dwo.cc/api/video?v=xd&t=' + Date.now(); document.querySelector('.loading-spinner').style.display = 'block'; } // 添加双击点赞功能 videoElement.addEventListener('dblclick', toggleLike); // 移动端触摸处理 let touchStartX = 0; videoElement.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; }); videoElement.addEventListener('touchend', (e) => { const touchEndX = e.changedTouches[0].clientX; const diffX = touchEndX - touchStartX; if (Math.abs(diffX) > 50) { nextVideo(); } }); </script> </body> </html> 短视频 :root { --primary-color: #ff6b6b; --secondary-color: #4ecdc4; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #fff; min-height: 100vh; } .app-container { max-width: 600px; margin: 0 auto; padding: 20px; position: relative; } .video-wrapper { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); background: #000; margin-top: 30px; aspect-ratio: 9/16; } #video-element { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; } .decorative-border { position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px; border: 3px solid var(--primary-color); border-radius: 30px; opacity: 0.3; pointer-events: none; } .floating-controls { position: absolute; bottom: 30px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: flex-end; } .control-group { display: flex; flex-direction: column; gap: 20px; } .control-btn { background: rgba(255, 255, 255, 0.1); border: none; width: 50px; height: 50px; border-radius: 15px; backdrop-filter: blur(10px); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .control-btn:hover { transform: scale(1.1); background: rgba(255, 255, 255, 0.2); } .control-btn i { font-size: 24px; color: #fff; } .like-btn.active i { color: var(--primary-color); animation: pulse 0.5s; } .user-info { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--secondary-color); } .loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; color: var(--primary-color); display: none; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .floating-text { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); color: var(--secondary-color); font-weight: bold; animation: float 2s infinite; } @media (max-width: 480px) { .app-container { padding: 10px; } .video-wrapper { margin-top: 20px; } } 每日推荐精彩视频 const videoElement = document.getElementById('video-element'); let isLiked = false; // 直接使用API地址作为视频源 videoElement.src = 'https://api.dwo.cc/api/video?v=xd'; videoElement.addEventListener('waiting', () => { document.querySelector('.loading-spinner').style.display = 'block'; }); videoElement.addEventListener('playing', () => { document.querySelector('.loading-spinner').style.display = 'none'; }); function toggleLike() { isLiked = !isLiked; const likeBtn = document.querySelector('.like-btn'); likeBtn.classList.toggle('active'); if (isLiked) { likeBtn.innerHTML = ''; } else { likeBtn.innerHTML = ''; } } function togglePlay() { const btn = document.querySelector('.fa-pause'); if (videoElement.paused) { videoElement.play(); btn.classList.remove('fa-play'); btn.classList.add('fa-pause'); } else { videoElement.pause(); btn.classList.remove('fa-pause'); btn.classList.add('fa-play'); } } function nextVideo() { videoElement.src = 'https://api.dwo.cc/api/video?v=xd&t=' + Date.now(); document.querySelector('.loading-spinner').style.display = 'block'; } // 添加双击点赞功能 videoElement.addEventListener('dblclick', toggleLike); // 移动端触摸处理 let touchStartX = 0; videoElement.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; }); videoElement.addEventListener('touchend', (e) => { const touchEndX = e.changedTouches[0].clientX; const diffX = touchEndX - touchStartX; if (Math.abs(diffX) > 50) { nextVideo(); } });

源码 # HTML

白泽 3月20日
0 6 0

//