ChatGPTDemo hiệu ứng 3d-card-tilt
@hocwordpress Chia sẻ code HTML CSS JS hiệu ứng 3D Card khi đi chuột theo. Có thể tải demo và PROMPT AI sinh code tại web #html #promptai ♬ nhạc nền – Thành MoNey🎧✈️
1. Copy Prompt bên dưới:
/* Url: https://https://wpshare247.com/kho-prompt/ Author: Chinsu Man Type: Prompt Normal Category: HTML CSS JS Ver: 1.0 */ Hãy tạo một file HTML hoàn chỉnh (single HTML file) chỉ tập trung vào việc tạo một interactive 3D card effect theo chuột bằng HTML, CSS và JavaScript thuần. Yêu cầu: 1. Tạo một card ở giữa màn hình. 2. Card có đặc điểm: - kích thước khoảng 260px x 160px - bo góc 16px - nền gradient tối (dark gradient) - border nhẹ - box-shadow tạo chiều sâu - chữ màu sáng 3. Nội dung card: - tiêu đề: "Interactive Card" - mô tả: "Di chuyển chuột để xem hiệu ứng 3D" 4. Hiệu ứng khi di chuyển chuột trên card: - card xoay theo vị trí chuột - sử dụng rotateX và rotateY - dùng perspective để tạo hiệu ứng 3D - transform-style: preserve-3d Công thức tính xoay: rotateX = -(y - centerY) / 10 rotateY = (x - centerX) / 10 5. Hiệu ứng ánh sáng di chuyển theo chuột trên card: Tạo pseudo element ::before với: radial-gradient() vị trí gradient dựa vào biến CSS: --mouse-x --mouse-y 6. JavaScript cần: - bắt sự kiện mousemove trên card - lấy vị trí chuột relative với card - tính rotateX rotateY - cập nhật transform - cập nhật biến CSS --mouse-x --mouse-y 7. Khi chuột rời card: card trở về trạng thái ban đầu: rotateX(0deg) rotateY(0deg) 8. Thêm animation tự động: khi không có tương tác chuột thì card tự di chuyển nhẹ bằng: requestAnimationFrame() fakeX = cos() fakeY = sin() để tạo chuyển động tự nhiên. 9. Không cần: - layout chia cột - container video - header - watermark - terminal - các thành phần UI khác Chỉ tập trung tạo hiệu ứng card 3D. 10. Xuất ra: - toàn bộ code HTML hoàn chỉnh - gồm <style> và <script> - không dùng thư viện ngoài - code rõ ràng và dễ đọc.
Truy cập vào AI Google Gemini https://gemini.google.com/app?hl=vi
Chọn công cụ Canvas, dán prompt vào và chạy.
2. Kết quả: HTML CSS JS
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TikTok WPSHARE247.COM: 3D Card Interaction</title>
<style>
:root {
--bg-deep: #05070a;
--bg-card: #0b111b;
--accent: #00ffff;
--text-main: #e0e0e0;
--terminal-bg: #111827;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
overflow: hidden;
}
/* Container chuẩn 9:16 cho TikTok */
.video-container {
width: 450px;
height: 800px;
background-color: var(--bg-deep);
border: 2px solid #333;
border-radius: 24px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
background-image:
radial-gradient(circle at 2px 2px, rgba(0, 255, 255, 0.05) 1px, transparent 0);
background-size: 24px 24px;
}
/* Header Section */
header {
padding: 40px 30px 20px;
text-align: left;
z-index: 10;
}
header h1 {
color: var(--accent);
font-size: 28px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}
header p {
color: #888;
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
}
/* Preview Area */
.preview-area {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
padding: 20px;
}
/* The actual Interactive Card */
.demo-card {
width: 260px;
height: 160px;
background: linear-gradient(135deg, #111827, #1f2937);
border-radius: 16px;
border: 1px solid rgba(0, 255, 255, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--accent);
transition: transform 0.15s ease-out;
transform-style: preserve-3d;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
cursor: pointer;
position: relative;
}
.demo-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 16px;
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 255, 255, 0.1), transparent 70%);
pointer-events: none;
}
.demo-card h3 {
font-size: 20px;
margin-bottom: 5px;
transform: translateZ(30px);
}
.demo-card p {
font-size: 12px;
opacity: 0.7;
transform: translateZ(20px);
}
/* Terminal Window */
.terminal-window {
height: 320px;
background-color: var(--terminal-bg);
margin: 0 20px 60px; /* Tránh caption TikTok */
border-radius: 12px;
border: 1px solid #333;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
}
.terminal-header {
background-color: #1f2937;
padding: 8px 15px;
display: flex;
gap: 6px;
align-items: center;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }
.terminal-title {
margin-left: 10px;
color: #666;
font-size: 11px;
font-family: monospace;
}
.terminal-body {
padding: 15px;
flex: 1;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
color: #d1d5db;
overflow-y: auto;
white-space: pre-wrap;
scrollbar-width: none;
}
.terminal-body::-webkit-scrollbar { display: none; }
.cursor {
display: inline-block;
width: 8px;
height: 15px;
background: var(--accent);
animation: blink 0.8s infinite;
vertical-align: middle;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Watermark */
.watermark {
position: absolute;
bottom: 25px;
right: 25px; /* Tránh icon bên phải một chút */
text-align: right;
pointer-events: none;
z-index: 100;
}
.watermark p {
font-size: 10px;
color: #555;
line-height: 1.4;
}
.watermark span {
color: var(--accent);
font-weight: bold;
font-size: 12px;
display: block;
margin-top: 2px;
animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse {
0%, 100% { opacity: 0.6; text-shadow: 0 0 0px var(--accent); }
50% { opacity: 1; text-shadow: 0 0 8px var(--accent); }
}
/* Syntax highlighting simple colors */
.token-tag { color: #f472b6; }
.token-attr { color: #fbbf24; }
.token-val { color: #34d399; }
.token-comment { color: #6b7280; font-style: italic; }
</style>
</head>
<body>
<div class="video-container">
<header>
<h1>Hiệu Ứng Card 3D Theo Chuột</h1>
<p>CSS + JavaScript Mouse Tilt Interaction</p>
</header>
<div class="preview-area">
<div class="demo-card" id="card">
<h3>Interactive Card</h3>
<p>Di chuyển chuột để xem hiệu ứng 3D</p>
</div>
</div>
<div class="watermark">
<p>PROMPT AI sinh Code được chia sẻ tại</p>
<span>WPSHARE247.COM</span>
</div>
</div>
<script>
// 1. Logic cho Card 3D
const card = document.getElementById('card');
// Giả lập chuyển động chuột tự động nếu không có tương tác người dùng
let autoMoveFrame = 0;
let isUserInteracting = false;
function updateCardEffect(x, y, rect) {
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = -(y - centerY) / 10;
const rotateY = (x - centerX) / 10;
card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
// Cập nhật vị trí gradient sáng cho card
const px = (x / rect.width) * 100;
const py = (y / rect.height) * 100;
card.style.setProperty('--mouse-x', `${px}%`);
card.style.setProperty('--mouse-y', `${py}%`);
}
card.addEventListener('mousemove', (e) => {
isUserInteracting = true;
const rect = card.getBoundingClientRect();
updateCardEffect(e.clientX - rect.left, e.clientY - rect.top, rect);
});
card.addEventListener('mouseleave', () => {
isUserInteracting = false;
card.style.transform = `perspective(600px) rotateX(0deg) rotateY(0deg)`;
});
const terminalBody = document.getElementById('code-content');
let index = 0;
// 3. Animation tự động cho Card khi không có người dùng
function autoAnimate() {
if (!isUserInteracting) {
autoMoveFrame += 0.05;
const rect = card.getBoundingClientRect();
const fakeX = (rect.width / 2) + Math.cos(autoMoveFrame) * 60;
const fakeY = (rect.height / 2) + Math.sin(autoMoveFrame) * 40;
updateCardEffect(fakeX, fakeY, rect);
}
requestAnimationFrame(autoAnimate);
}
window.onload = () => {
//typeCode();
autoAnimate();
};
</script>
</body>
</html>
