Trang 404 Ma Quái - tin tức the thao bóng đá

Apr 10, 2025 · 2 phút đọc · tin tức the thao bóng đá ·

(Bài viết đồng bộ đa nền tảng)

Do bị ốm nên nghỉ phép ở nhà, nhưng không thể ngủ được. Dù rảnh rỗi, tôi đã quyết định dọn dẹp ổ tin tuc the thao trong nuoc cứng di động và vô tình tìm thấy một trang 404 ma quái đơn giản mà trước đây tôi từng làm. Điều đặc biệt là nó có hiệu ứng nổi; đôi mắt nhỏ xíu còn theo dõi chuyển động của chuột nữa, trông thật đáng yêu.

[Hình ảnh minh họa]

[Hiển thị mã nguồn]

 1<!doctype html>
 2<html>
 3<head>
 4    <meta charset="utf-8">
 5    <title>iCat - Trang 404 Ma Quái</title>
 6    <script type="text/javascript" src="yan.js"></script>
 7    <link rel="stylesheet" href="style.css">
 8</head>
 9<body>
10    <div class="box">
11        <div class="box__ghost">
12            <div class="symbol"></div>
13            <div class="symbol"></div>
14            <div class="symbol"></div>
15            <div class="symbol"></div>
16            <div class="symbol"></div>
17            <div class="symbol"></div>
18            <div class="box__ghost-container">
19                <div class="box__ghost-eyes">
20                    <div class="box__eye-left"></div>
21                    <div class="box__eye-right"></div>
22                </div>
23                <div class="box__ghost-bottom">
24                    <div></div>
25                    <div></div>
26                    <div></div>
27                    <div></div>
28                    <div></div>
29                </div>
30            </div>
31            <div class="box__ghost-shadow"></div>
32        </div>
33        <div class="box__description">
34            <div class="box__description-container">
35                <div class="box__description-title">~ 404 ~</div>
36                <div class="box__description-text">Không tìm thấy nội dung bạn muốn!</div>
37            </div>
38            Quay lại
39        </div>
40    </div>
41    <script>
42        // Địa chỉ gốc tác phẩm:
43        var pageX = $(document).width();
44        var pageY = $(document).height();
45        var mouseY = 0;
46        var mouseX = 0;
47
48        $(document).mousemove(function(event) {
49            // Trục đứng
50            mouseY = event.pageY;
51            yAxis = (pageY / 2 - mouseY) / pageY * 300;
52
53            // Trục ngang
54            mouseX = event.pageX / -pageX;
55            xAxis = -mouseX * 100 - 100;
56
57            $('.box__ghost-eyes').css({
58                'transform': 'translate(' + xAxis + '%,-' + yAxis + '%)'
59            });
60            // console.log('X: ' + xAxis);
61        });
62    </script>
63</body>
64</html>