纯html的塔罗牌
源码
<!--塔罗牌-->
<!--开发者：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`函数被调用，开始获取并展示塔罗牌信息。
展示如下
