纯html的塔罗牌

最新推荐文章于 2024-07-09 18:39:27 发布

希胥

最新推荐文章于 2024-07-09 18:39:27 发布

阅读量806

点赞数 16

文章标签： html

本文链接：https://blog.csdn.net/2301_80152057/article/details/137090394

版权

本文介绍了一个使用HTML、CSS和JavaScript编写的网页，通过fetchAPI从服务器获取塔罗牌数据，动态展示包括标题、图片和含义的交互式塔罗牌效果。

摘要由CSDN通过智能技术生成

源码

<!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`函数被调用，开始获取并展示塔罗牌信息。

展示如下

希胥

关注

16
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
纯html的塔罗牌

<title>塔罗牌</title><style>body {margin: 0;width: 80%;width: 90%;0% {/* 初始状态：未翻转 */100% {/* 最终状态：完全翻转一周 */</style>
复制链接

扫一扫