纯html的塔罗牌

源码

6a64ce4207fc48cc9fa56a53609dec17.jpg

<!--塔罗牌-->

<!--开发者:seTaoo-->

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>塔罗牌</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f2f2f2;

            margin: 0;

            height: 100vh;

            display: flex;

            justify-content: center;

            align-items: center;

        }

 

        #tarot-card {

            width: 80%;

            height: 60%;

            border-radius: 10px;

            background-color: #fff;

            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            padding: 20px;

            text-align: center;

            perspective: 1000px; 

        }

 

        #tarot-image {

            width: 90%;

            height: 90%;

            margin-top: 10px;

            margin-bottom: 10px;

            transform-style: preserve-3d; 

            animation: flipAnimation 2s ease-in-out; 

        }

 

        @keyframes flipAnimation {

            0% {

                transform: rotateY(0deg); /* 初始状态:未翻转 */

            }

            100% {

                transform: rotateY(360deg); /* 最终状态:完全翻转一周 */

            }

        }

    </style>

</head>

<body>

    <div id="tarot-card">

        <div id="tarot-title"></div>

        <img id="tarot-image" src="" alt="塔罗牌">

        <div id="tarot-meaning"></div>

    </div>

 

    <script>

        function fetchTarotCard() {

            fetch('http://api.tangdouz.com/tarot.php')

                .then(response => response.text())

                .then(data => {

                    const title = data.match(/你翻开了(.+?)±/)[1];

                    const image = data.match(/±img=(.+?)±/)[1];

                    const meaning = data.match(/其意义为:\\r(.+)/)[1];

 

                    document.getElementById('tarot-image').src = image;

                    document.getElementById('tarot-title').textContent = title;

                    document.getElementById('tarot-meaning').textContent = meaning;

                })

                .catch(error => console.error('Error fetching tarot card:', error));

        }

 

        fetchTarotCard();

    </script>

</body>

</html>

下面是代码的详细解释:

1. HTML结构:

   - 页面的主体是一个`div`元素,其ID为`tarot-card`,代表塔罗牌本身。

   - 在`tarot-card`内部,有三个子元素:

     - `tarot-title`:用于显示塔罗牌的标题。

     - `tarot-image`:一个`img`标签,用于显示塔罗牌的图片。

     - `tarot-meaning`:用于显示塔罗牌的含义或解释。

 

2. CSS样式:

   - 页面背景色设置为浅灰色(#f2f2f2),字体为Arial。

   - `tarot-card`的样式使其在页面中心显示,并且具有一定的阴影效果,增加了立体感。

   - `tarot-image`使用了一个CSS动画`flipAnimation`,使得图片有一个翻转的效果,增加了页面的互动性。

 

3. JavaScript功能:

   - `fetchTarotCard`函数通过`fetch` API从`http://api.tangdouz.com/tarot.php`获取数据。

   - 获取的数据通过正则表达式匹配出塔罗牌的标题、图片链接和含义。

   - 匹配到的信息分别被设置到对应的HTML元素中,即`tarot-title`、`tarot-image`和`tarot-meaning`。

   - 页面加载时,`fetchTarotCard`函数被调用,开始获取并展示塔罗牌信息。

展示如下

e4f17d90f142470597f7596702891414.jpg

 60bff2206a354a7f91b1187887247d8b.jpg