更通用的前端标记的细化。在Web应用程序中，这通常意味着HTML，CSS和JavaScript
XTerm JS：允许用户输入/发出命令（在html/js中）
我一直在检查一些可以用于我的网站的 HTML/JS/CSS 终端，并且遇到了 XTerm.js。我决定尝试一下，但在插入我从...
在 Astro 上创建 html 元素时，Map.prototype.forEach() 不起作用[重复]
我正在Astro框架上写一个小网站。我有一份“文件接受点”清单。以前，我只是将它们存储在变量 Office = [ {} , {} , {} ] 中。我将它们输出到 fr...
我想知道我是否可以获得组件中迷你图的一些帮助，因为我对此还很陌生。 现在，我只想显示一个具有默认设置的图表和一个 num 数组...
我在 React 应用程序中遇到一个问题，我正在使用组件渲染包含动态行的表格。但是，行被视为单独的元素，而不是具有...
因为我对这个概念很陌生并且想学习，所以只是想要有关初学者友好课程的建议。有的话请推荐一下？ 一个结构良好的初学者友好课程，其中包含一些项目...
我在 NextJS 中创建了一个手风琴组件。现在我想自动一一打开手风琴项目，并为每个单独的手风琴项目设置自定义持续时间。另外，
Nuxt中的app.vue和pages/index.vue文件有什么区别？
我是 Nuxt 的新手，对何时使用 app.vue 或 /pages/index.vue 感到困惑。我何时使用它们中的任何一个，或者如果起点是 app，使用 index.vue 的目的是什么.vue.
我正在使用 Tailwind CSS 来构建我的作品集。但是当我使用它们时，CSS 类没有正确加载，特别是“bg-color”。我应该怎么办？ 我尝试改变
我对 css、html 还很陌生。目前我遇到了一个问题，放大时无法到达顶部或左侧，缩小时看起来从未发生过这种情况 !DOCTYPE html> 我对 css、html 还很陌生。目前我遇到了一个问题，放大时无法到达顶部或左侧，缩小时看起来从未发生过这种情况 !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Viewer</title> <style> body, html { margin: 0; padding: 0; height: 100%; } #container { display: flex; height: 100%; overflow: hidden; /* Agregado para ocultar el desbordamiento de los botones */ } #svg-container { flex: 1; overflow: auto; padding: 10px; } svg { max-width: 100%; max-height: 100%; display: block; } .zoom-btn { padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc; cursor: pointer; z-index: 1; /* Asegura que los botones estén por encima del SVG */ } </style> </head> <body> <div id="container"> <div id="svg-container"> <svg id="my-svg" version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1049 744" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0,744) scale(0.1,-0.1)" fill="#000000" stroke="none"> <path d="M8699 7344 c-10 -11 -42 -61 -73 -112 -613 -1016 -1784 -2032 -3386 -2939 -269 -152 -537 -294 -650 -343 -352 -155 -1199 -468 -2245 -832 -443 -154 -920 -317 -947 -323 -14 -4 -33 -14 -41 -23 -14 -15 -1280 -2382 -1293 -2417 -3 -8 5 -25 18 -38 23 -23 29 -24 194 -26 170 -1 1458 -25 1954 -36 146 -3 732 -15 1303 -25 2689 -51 3130 -60 3382 -65 149 -3 614 -12 1035 -20 913 -17 1199 -23 1800 -35 250 -6 503 -10 562 -10 105 0 108 1 125 26 19 29 46 -199 -272 2284 -30 239 -125 982 -211 1650 -85 668 -164 1278 -174 1355 l-18 140 143 795 c79 437 149 824 155 859 11 59 10 65 -10 86 -25 27 -73 31 -455 40 -126 3 -288 7 -360 10 -503 18 -519 18 -536 -1z m696 -110 c303 -9 552 -18 554 -20 1 -1 -61 -355 -139 -786 -79 -431 -145 -810 -147 -843 -3 -38 16 -217 51 -490 52 -406 113 -878 226 -1765 27 -212 81 -635 120 -940 39 -305 118 -919 175 -1365 57 -445 101 -812 99 -814 -4 -4 -1699 24 -2044 34 -91 3 -304 7 -475 10 -414 7 -1257 23 -1585 30 -146 3 -618 12 -1050 20 -741 14 -954 18 -1555 31 -137 2 -961 18 -1830 35 -868 16 -1581 32 -1583 34 -2 2 5 19 16 37 11 18 277 517 592 1108 315 591 583 1091 595 1111 13 20 35 39 49 43 123 31 1895 655 2451 864 559 209 756 294 1053 453 1750 938 3074 2047 3732 3127 l63 102 41 0 c22 0 289 -7 591 -16z"/> <path id="destino" d="M9470 7005 l0 -165 150 0 150 0 0 165 0 165 -150 0 -150 0 0 -165z m250 0 l0 -115 -100 0 -100 0 0 115 0 115 100 0 100 0 0 -115z"/> <g id="punto-destino"> <circle cx="9470" cy="7005" r="100" fill="red" /> </g> <path id="camino_abajo" d="M9305 6478 c-3 -7 -25 -1225 -50 -2707 -24 -1482 -46 -2696 -48 -2698 -2 -2 -1731 31 -3841 72 -2111 41 -3842 73 -3847 70 -12 -8 -12 -32 0 -39 5 -3 1736 -40 3846 -81 2111 -41 3848 -78 3860 -81 13 -3 25 -1 29 4 8 13 98 5451 91 5463 -9 13 -35 11 -40 -3z"/> <path id="camino_arriba" d="M8845 6458 c-3 -7 -43 -1088 -90 -2402 -46 -1313 -86 -2390 -88 -2392 -1 -2 -1594 28 -3538 66 -1943 38 -3544 70 -3557 70 -24 0 -41 -25 -26 -40 11 -11 7160 -154 7176 -144 5 3 7 16 4 27 -3 11 33 1097 80 2411 46 1315 82 2397 79 2404 -2 6 -11 12 -20 12 -9 0 -18 -6 -20 -12z"/> <path id="entrada" d="M710 870 l0 -120 310 0 310 0 0 120 0 120 -310 0 -310 0 0 -120z m570 0 l0 -70 -260 0 -260 0 0 70 0 70 260 0 260 0 0 -70z"/> <g id="punto-entrada"> <circle cx="710" cy="870" r="100" fill="red" /> </g> <polyline id="ruta" fill="none" stroke="red" stroke-width="2"/> </g> </svg> </div> <div id="nav"> <button class="zoom-btn" id="zoom-in">+</button> <button class="zoom-btn" id="zoom-out">-</button> </div> </div> <script> var zoomInBtn = document.getElementById('zoom-in'); var zoomOutBtn = document.getElementById('zoom-out'); var puntoEntrada = document.getElementById('punto-entrada'); var puntoDestino = document.getElementById('punto-destino'); var ruta = document.getElementById('ruta'); var svg = document.getElementById('my-svg'); var scale = 1; zoomInBtn.addEventListener('click', function() { scale *= 1.2; updateView(); }); zoomOutBtn.addEventListener('click', function() { scale *= 0.8; updateView(); }); function updateView() { svg.style.transform = 'scale(' + scale + ')'; } // Calcular la ruta desde la entrada hasta el destino function calcularRuta() { debugger; // Obtener coordenadas de los puntos de entrada y destino var entradaX = puntoEntrada.getAttributeNS(null, 'cx'); var entradaY = puntoEntrada.getAttribute('cy'); var destinoX = puntoDestino.getAttribute('cx'); var destinoY = puntoDestino.getAttribute('cy'); // Establecer las coordenadas de los puntos de la ruta ruta.setAttribute('x1', entradaX); ruta.setAttribute('y1', entradaY); ruta.setAttribute('x2', destinoX); ruta.setAttribute('y2', destinoY); } // Calcular la ruta al cargar la página window.onload = function() { calcularRuta(); }; </script> </body> </html> 我已经尝试编辑一些属性，但不起作用。我不太确定为什么会发生这种情况，并且非常感谢任何帮助。抱歉英语不好。 为了解决这个问题，您需要在放大或缩小时动态调整 SVG 内容在其容器内的缩放和位置。目前，您仅对 SVG 元素本身应用缩放变换，但您还需要调整容器的滚动位置以保持缩放内容可见。 以下是如何更改 updateView() 函数来实现此目的： function updateView() { svg.style.transform = 'scale(' + scale + ')'; // Adjust container scroll position var rect = svg.getBoundingClientRect(); var scrollLeft = (rect.width * scale - rect.width) / 2; var scrollTop = (rect.height * scale - rect.height) / 2; svg.parentElement.scrollLeft = scrollLeft; svg.parentElement.scrollTop = scrollTop; } 此代码计算容器需要水平和垂直滚动的量，以保持缩放的内容居中且可见，然后相应地调整容器的scrollLeft和scrollTop。
我想在小屏幕上以全宽和全高显示对话框。这似乎有效。然而，当我尝试在较大的屏幕中删除宽度和高度（通过使用未设置、自动或初始）时，它
我正在使用顺风类以及外部样式表中定义的自定义类。我需要将代码转换为内联样式以便在其他地方使用。我怎样才能做到这一点？ HTML： 我正在使用顺风类以及外部样式表中定义的自定义类。我需要将代码转换为内联样式以便在其他地方使用。我该怎么做？ HTML： <div class="lg:w-1/4 w-full h-auto px-4 py-2 bg-orange border-2 shadow-lg border-orange rounded-2xl flex gap-2 items-center"> <img src="/Icons/illustration_no-payment.svg" alt="illustration_no-payment"> <div class="h-auto flex flex-col justify-between"> <h3 class="text-mont text-sm text-lblack font-bold">Oh no, your Payment Failed!</h3> <p class="text-mont text-xs text-l2black">Please contact us directly so we can put this right without delay. We appreciate your patience.</p> </div> </div> CSS： .text-lblack { color: #1d1d1d; } .border-orange { border-color: #fd4949; } .text-l2black { color: #444445; } 我正在寻找相同的答案，我想将我的反应组件的 tailwindcss 转换为内联样式以达到某种目的。你有解决这个问题吗
我有一个简单的 React 应用程序，其中的 div 包含 SVG 球图像。 将鼠标悬停在图像上时，我希望它能够同时平滑地旋转和向左移动。 当悬停状态为 false 时，我希望它腐烂...
react：功能组件内部的方法无法获取useState变量的最新值
我有以下代码： 从“preact/hooks”导入{ useState，useEffect }； 导出函数 App() { const [pageContent, setPageContent] = useState(""); useEffect(()...
我正在使用 SwiperJS React 组件，并希望在使用 VoiceOver 看到幻灯片内容时宣布它们。有没有办法做到这一点？现在用户在 cl...
辅助功能：如何通过 VoiceOver 播报 SwiperJS 幻灯片内容？
我正在使用 SwiperJS React 组件，并希望在使用 VoiceOver 看到幻灯片内容时宣布它们。有没有办法做到这一点？现在用户在 cl...
我刚刚学习前端，然后我想出了一种使用 IIFE 创建模块并将其注册到命名空间的方法。从下面的代码来看，我仍然不明白一些事情： 为什么
<div> </div> <pre><code><html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <title>Game Cards App</title> <link rel="icon" type="image/png" href="https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png"> <style> .card-partially-visible { pointer-events: none; } #main-content { display: none; } * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%); animation: shine 4s linear infinite; color: white; font-family: "Lato"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ul { margin: 0; padding: 0; list-style-type: none; max-width: 800px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; overflow-x: hidden; } .card { float: left; position: relative; width: calc(33.33% - 30px + 9.999px); height: 340px; margin: 0 30px 30px 0; perspective: 1000; } .card:first-child .card__front { background:#5271C2; } .card__front img { width: 100%; height: 100%; object-fit: cover; } .card:first-child .card__num { text-shadow: 1px 1px rgba(52, 78, 147, 0.8) } .card:nth-child(2) .card__front { background:#35a541; } .card:nth-child(2) .card__num { text-shadow: 1px 1px rgba(34, 107, 42, 0.8); } .card:nth-child(3) { margin-right: 0; } .card:nth-child(3) .card__front { background: #bdb235; } .card:nth-child(3) .card__num { text-shadow: 1px 1px rgba(129, 122, 36, 0.8); } .card:nth-child(4) .card__front { background: #db6623; } .card:nth-child(4) .card__num { text-shadow: 1px 1px rgba(153, 71, 24, 0.8); } .card:nth-child(5) .card__front { background: #3e5eb3; } .card:nth-child(5) .card__num { text-shadow: 1px 1px rgba(42, 64, 122, 0.8); } .card:nth-child(6) .card__front { background: #aa9e5c; } .card:nth-child(6) .card__num { text-shadow: 1px 1px rgba(122, 113, 64, 0.8); } .card:last-child { margin-right: 0; } .card__flipper { cursor: pointer; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border: 3.5px solid rgba(255, 215, 0, 0.6); background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); } .card__front, .card__back { position: absolute; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 340px; } .card__front { transform: rotateY(0); z-index: 2; overflow: hidden; } .card__back { transform: rotateY(180deg) scale(1.1); background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934); display: flex; flex-flow: column wrap; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .card__back span { font-weight: bold; /* Metni kalın yap */ color: white; /* Beyaz renk */ font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__name { font-size: 32px; line-height: 0.9; font-weight: 700; } .card__name span { font-size: 14px; } .card__num { font-size: 100px; margin: 0 8px 0 0; font-weight: 700; } @media (max-width: 700px) { .card__num { font-size: 70px; } } @media (max-width: 700px) { .card { width: 100%; height: 290px; margin-right: 0; float: none; } .card .card__front, .card .card__back { height: 290px; overflow: hidden; } } /* Demo */ main { text-align: center; } main h1, main p { margin: 0 0 12px 0; } main h1 { margin-top: 12px; font-weight: 300; } .fa-github { color: white; font-size: 50px; margin-top: 8px; } .tm-container { display: flex; justify-content: center; align-items: center; } .tm-letter { display:inline-block; font-size:30px; margin: 0 5px; margin-top: 10px; opacity: 0; transform: translateY(0); animation: letter-animation 6s ease-in-out infinite; } @keyframes letter-animation { 0%, 100% { opacity: 1; transform: translateY(0); } 10%, 40%, 60%, 90% { opacity: 1; transform: translateY(-10px); } 20%, 80% { opacity: 1; transform: translateY(0); } } #m-letter { animation-delay: 1.5s; } a { position: relative; display: inline-block; padding: 0px; } a::before { content: ''; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */ box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); filter: blur(4px) brightness(1.5); / opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: -1; } a:hover::before { opacity: 1; } body.hoverEffect { background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a); } #gameCard { width: 300px; height: 450px; margin: 50px auto; padding: 20px; border-radius: 15px; box-shadow: 0 0 50px 10px #FFD700, 0 0 100px 20px #0000FF, 0 0 150px 30px #000033; background: rgba(0,0,0,0.7); color:#FFD700; text-align: center; border: 3px solid #FFD700; } #gameCardLink span { font-size: 18px; margin-right: 5px; font-weight: bold; } #gameCardLink span:last-child { font-size: 0.79em; vertical-align: super; opacity: 0.9; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url('data:image/jpeg;base64,/); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div id="loading-animation"> <div class="loader"></div> </div> <div id="main-content"> <div class="tm-container"> <div class="tm-letter" id="t-letter">T</div> <div class="tm-letter" id="m-letter">M</div> </div> <audio id="flipSound" preload="auto"> <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav"> </audio> <main> <div id="gameCardLink"> <span>G</span> <span>a</span> <span>m</span> <span>e</span> <span> </span> <!-- Boşluk eklemek için span ekledik --> <span> </span> <span>C</span> <span> </span> <span>a</span> <span> </span> <span>r</span> <span> </span> <span>d</span> <span> </span> <span>s</span> <span>®</span> </div> <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p> </main> <ul> <li class="card" > <div class="card__flipper"> <div class="card__front"> <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman"> <p class="card__name"><span>Marvel</span><br>Spiderman</p> <p class="card__num">1</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35" /> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>1.89 Bil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman"> <p class="card__name"><span>DC</span><br>Batman</p> <p class="card__num">2</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>771 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3"> <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p> <p class="card__num">3</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>845.4 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam"> <p class="card__name"><span>DC</span><br>Shazam2</p> <p class="card__num">4</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>462.5 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash"> <p class="card__name"><span>DC</span><br>Flash</p> <p class="card__num">5</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>560.2 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2"> <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p> <p class="card__num">6</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>955.8 Mil. $</span> </div> </div> </li> </ul> </div> </body> <script> var Flipper = (function() { var card = $('.card'); var flipper = card.find('.card__flipper'); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find('.card__flipper'); var offset = thisCard.offset(); var xc = win.width() / 2; var yc = win.height() / 2; var docScroll = $(document).scrollTop(); var cardW = thisCard.outerWidth() / 2; var cardH = thisCard.height() / 2; var transX = xc - offset.left - cardW; var transY = docScroll + yc - offset.top - cardH; // if (offset.top > card.height()) transY = docScroll - offset.top + cardH; if (win.width() <= 700) transY = 0; if (card.hasClass('active')) unflip(); thisCard.css({'z-index': '3'}).addClass('active'); thisFlipper.css({ 'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)', '-webkit-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)', '-ms-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)' }).addClass('active'); return false; }; var unflip = function(e) { card.css({'z-index': '1'}).removeClass('active'); flipper.css({ 'transform': 'none', '-webkit-transform': 'none', '-ms-transform': 'none' }).removeClass('active'); }; var bindActions = function() { card.on('click', flip); win.on('click', unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); </script> <script> <!-- HOOVER FOR TRAILER --> let hoverTimeout; $('.card').hover(function() { const currentCard = $(this); // Store the current card element in a variable hoverTimeout = setTimeout(() => { currentCard.find('.card__front').hide(); currentCard.find('.iframe').show(); var src = currentCard.find('.iframe').attr("src"); currentCard.find('.iframe').attr("src", src); // Add fullscreen functionality currentCard.find('.iframe').on('click', function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) }, function() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find('.card__front').show(); $(this).find('.iframe').hide(); var src = $(this).find('.iframe').attr("src"); if (src) { $(this).find('.iframe').attr("src", src.replace('?autoplay=1', '')); } }); </script> <script> var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); // Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın. $(".card__front").click(function() { console.log('Kart önüne tıklandı', event.target); flipSound.currentTime = 0; flipSound.play(); console.log('dönüş sesi çalındı', event.target); }); $(".card").click(function() { var card = $(this); var cardId = card.find(".card__num").text(); console.log(cardId); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { console.log("is card flag true or false", cardId); if (!cardFlags[cardId]) { startAnimation(div); console.log("started"); cardFlags[cardId] = true; card.addClass("flipped"); } // Adding canvas to back-side var div = document.querySelector('.flipped .card__flipper.active .card__back'); var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } } else { console.log("stopped"); card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); </script> <script> // Body's hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); </script> <script> // Portal effect var p5Instance; function startAnimation(div) { // adding canvas to back-side var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 80); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(230, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } </script> <script> // hiding and showing loading animation function hideLoadingAnimation() { console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor"); var loadingAnimation = document.getElementById("loading-animation"); var mainContent = document.getElementById("main-content"); loadingAnimation.style.display = "none"; mainContent.style.display = "block"; } window.onload = function() { console.log("Sayfa tamamen yüklendi"); hideLoadingAnimation(); }; </script> </html> </code></pre> <p>朋友们大家好，在该问题的图片中，有一张中间颠倒的紫色卡片。上面和下面各有 2 张牌与这张牌重叠。当卡片正面和背面相互重叠时，我如何轻松确保正面半可见的卡片底部不会通过悬停播放预告片（<strong>鼠标事件在这种情况下不起作用</strong>）？用CSS？我正在尝试用非常简单的方法来解决这个问题。</p> <pre><code>card-partially-visible { pointer-events: none; } </code></pre> <p>这样的事情有意义吗？如果是这样，您应该如何确定它是否部分可见？ 有没有现成的功能可以自动检测？</p> <p><a href="https://i.stack.imgur.com/fMLLv.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2ZNTEx2LnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="1"> <p>如果将 3D 过渡从 <pre><code>.card__flipper</code></pre> 移动到 <pre><code>.card</code></pre> 本身，您可以给出任何 <pre><code>.card.active</code></pre> <pre><code>::before</code></pre> 和 <pre><code>::after</code></pre> 伪元素，这将覆盖后面的卡片。</p> <p>在下面的工作示例中，我将伪元素设置为半透明红色（即<pre><code>rgba(255, 0, 0, 0.5)</code></pre>），以便您可以看到它们，但通常您只需将伪元素设置为透明即可：<pre><code>rgba(0, 0, 0, 0)</code></pre>。</p> <hr/> <p><strong>工作示例：</strong></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var Flipper = (function() { var card = $('.card'); var flipper = card.find('.card__flipper'); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find('.card__flipper'); var offset = thisCard.offset(); var xc = win.width() / 2; var yc = win.height() / 2; var docScroll = $(document).scrollTop(); var cardW = thisCard.outerWidth() / 2; var cardH = thisCard.height() / 2; var transX = xc - offset.left - cardW; var transY = docScroll + yc - offset.top - cardH; // if (offset.top > card.height()) transY = docScroll - offset.top + cardH; if (win.width() <= 700) transY = 0; if (card.hasClass('active')) unflip(); thisCard.css({'z-index': '3'}).css({ 'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)' }).addClass('active'); thisFlipper.addClass('active'); return false; }; var unflip = function(e) { card.css({'z-index': '1'}).css({ 'transform': 'none' }).removeClass('active'); flipper.removeClass('active'); }; var bindActions = function() { card.on('click', flip); win.on('click', unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); <!-- HOOVER FOR TRAILER --> let hoverTimeout; $('.card').hover(function() { const currentCard = $(this); // Store the current card element in a variable hoverTimeout = setTimeout(() => { currentCard.find('.card__front').hide(); currentCard.find('.iframe').show(); var src = currentCard.find('.iframe').attr("src"); currentCard.find('.iframe').attr("src", src); // Add fullscreen functionality currentCard.find('.iframe').on('click', function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) }, function() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find('.card__front').show(); $(this).find('.iframe').hide(); var src = $(this).find('.iframe').attr("src"); if (src) { $(this).find('.iframe').attr("src", src.replace('?autoplay=1', '')); } }); var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); // Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın. $(".card__front").click(function() { console.log('Kart önüne tıklandı', event.target); flipSound.currentTime = 0; flipSound.play(); console.log('dönüş sesi çalındı', event.target); }); $(".card").click(function() { var card = $(this); var cardId = card.find(".card__num").text(); console.log(cardId); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { console.log("is card flag true or false", cardId); if (!cardFlags[cardId]) { startAnimation(div); console.log("started"); cardFlags[cardId] = true; card.addClass("flipped"); } // Adding canvas to back-side var div = document.querySelector('.flipped .card__flipper.active .card__back'); var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } } else { console.log("stopped"); card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); // Body's hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); // Portal effect var p5Instance; function startAnimation(div) { // adding canvas to back-side var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 80); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(230, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } // hiding and showing loading animation function hideLoadingAnimation() { console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor"); var loadingAnimation = document.getElementById("loading-animation"); var mainContent = document.getElementById("main-content"); loadingAnimation.style.display = "none"; mainContent.style.display = "block"; } window.onload = function() { console.log("Sayfa tamamen yüklendi"); hideLoadingAnimation(); };</code></pre> <pre><code>.card.active::before, .card.active::after { content: ''; position: relative; z-index: 12; display: block; height: 260px; background-color: rgb(255, 0, 0, 0.5); } .card.active::before { margin-top: -260px; } #main-content { display: none; } * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%); animation: shine 4s linear infinite; color: white; font-family: "Lato"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ul { margin: 0; padding: 0; list-style-type: none; max-width: 800px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; overflow-x: hidden; } .card { float: left; position: relative; width: calc(33.33% - 30px + 9.999px); height: 340px; margin: 0 30px 30px 0; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .card:first-child .card__front { background:#5271C2; } .card__front img { width: 100%; height: 100%; object-fit: cover; } .card:first-child .card__num { text-shadow: 1px 1px rgba(52, 78, 147, 0.8) } .card:nth-child(2) .card__front { background:#35a541; } .card:nth-child(2) .card__num { text-shadow: 1px 1px rgba(34, 107, 42, 0.8); } .card:nth-child(3) { margin-right: 0; } .card:nth-child(3) .card__front { background: #bdb235; } .card:nth-child(3) .card__num { text-shadow: 1px 1px rgba(129, 122, 36, 0.8); } .card:nth-child(4) .card__front { background: #db6623; } .card:nth-child(4) .card__num { text-shadow: 1px 1px rgba(153, 71, 24, 0.8); } .card:nth-child(5) .card__front { background: #3e5eb3; } .card:nth-child(5) .card__num { text-shadow: 1px 1px rgba(42, 64, 122, 0.8); } .card:nth-child(6) .card__front { background: #aa9e5c; } .card:nth-child(6) .card__num { text-shadow: 1px 1px rgba(122, 113, 64, 0.8); } .card:last-child { margin-right: 0; } .card__flipper { cursor: pointer; border: 3.5px solid rgba(255, 215, 0, 0.6); background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .card__front, .card__back { position: absolute; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 340px; } .card__front { transform: rotateY(0); z-index: 2; overflow: hidden; } .card__back { transform: rotateY(180deg) scale(1.1); background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934); display: flex; flex-flow: column wrap; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .card__back span { font-weight: bold; /* Metni kalın yap */ color: white; /* Beyaz renk */ font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__name { font-size: 32px; line-height: 0.9; font-weight: 700; } .card__name span { font-size: 14px; } .card__num { font-size: 100px; margin: 0 8px 0 0; font-weight: 700; } @media (max-width: 700px) { .card__num { font-size: 70px; } } @media (max-width: 700px) { .card { width: 100%; height: 290px; margin-right: 0; float: none; } .card .card__front, .card .card__back { height: 290px; overflow: hidden; } } /* Demo */ main { text-align: center; } main h1, main p { margin: 0 0 12px 0; } main h1 { margin-top: 12px; font-weight: 300; } .fa-github { color: white; font-size: 50px; margin-top: 8px; } .tm-container { display: flex; justify-content: center; align-items: center; } .tm-letter { display:inline-block; font-size:30px; margin: 0 5px; margin-top: 10px; opacity: 0; transform: translateY(0); animation: letter-animation 6s ease-in-out infinite; } @keyframes letter-animation { 0%, 100% { opacity: 1; transform: translateY(0); } 10%, 40%, 60%, 90% { opacity: 1; transform: translateY(-10px); } 20%, 80% { opacity: 1; transform: translateY(0); } } #m-letter { animation-delay: 1.5s; } a { position: relative; display: inline-block; padding: 0px; } a::before { content: ''; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */ box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); filter: blur(4px) brightness(1.5); / opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: -1; } a:hover::before { opacity: 1; } body.hoverEffect { background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a); } #gameCard { width: 300px; height: 450px; margin: 50px auto; padding: 20px; border-radius: 15px; box-shadow: 0 0 50px 10px #FFD700, 0 0 100px 20px #0000FF, 0 0 150px 30px #000033; background: rgba(0,0,0,0.7); color:#FFD700; text-align: center; border: 3px solid #FFD700; } #gameCardLink span { font-size: 18px; margin-right: 5px; font-weight: bold; } #gameCardLink span:last-child { font-size: 0.79em; vertical-align: super; opacity: 0.9; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url('data:image/jpeg;base64,/); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</code></pre> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <div id="loading-animation"> <div class="loader"></div> </div> <div id="main-content"> <div class="tm-container"> <div class="tm-letter" id="t-letter">T</div> <div class="tm-letter" id="m-letter">M</div> </div> <audio id="flipSound" preload="auto"> <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav"> </audio> <main> <div id="gameCardLink"> <span>G</span> <span>a</span> <span>m</span> <span>e</span> <span> </span> <!-- Boşluk eklemek için span ekledik --> <span> </span> <span>C</span> <span> </span> <span>a</span> <span> </span> <span>r</span> <span> </span> <span>d</span> <span> </span> <span>s</span> <span>®</span> </div> <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p> </main> <ul> <li class="card" > <div class="card__flipper"> <div class="card__front"> <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman"> <p class="card__name"><span>Marvel</span><br>Spiderman</p> <p class="card__num">1</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35" /> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>1.89 Bil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman"> <p class="card__name"><span>DC</span><br>Batman</p> <p class="card__num">2</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>771 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3"> <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p> <p class="card__num">3</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>845.4 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam"> <p class="card__name"><span>DC</span><br>Shazam2</p> <p class="card__num">4</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>462.5 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash"> <p class="card__name"><span>DC</span><br>Flash</p> <p class="card__num">5</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>560.2 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2"> <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p> <p class="card__num">6</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>955.8 Mil. $</span> </div> </div> </li> </ul> </div></code></pre> </div> </div> <p></p> </answer> </body></html>
<pre><code><html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <title>Game Cards App</title> <link rel="icon" type="image/png" href="https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png"> <style> .card-partially-visible { pointer-events: none; } #main-content { display: none; } * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%); animation: shine 4s linear infinite; color: white; font-family: "Lato"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ul { margin: 0; padding: 0; list-style-type: none; max-width: 800px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; overflow-x: hidden; } .card { float: left; position: relative; width: calc(33.33% - 30px + 9.999px); height: 340px; margin: 0 30px 30px 0; perspective: 1000; } .card:first-child .card__front { background:#5271C2; } .card__front img { width: 100%; height: 100%; object-fit: cover; } .card:first-child .card__num { text-shadow: 1px 1px rgba(52, 78, 147, 0.8) } .card:nth-child(2) .card__front { background:#35a541; } .card:nth-child(2) .card__num { text-shadow: 1px 1px rgba(34, 107, 42, 0.8); } .card:nth-child(3) { margin-right: 0; } .card:nth-child(3) .card__front { background: #bdb235; } .card:nth-child(3) .card__num { text-shadow: 1px 1px rgba(129, 122, 36, 0.8); } .card:nth-child(4) .card__front { background: #db6623; } .card:nth-child(4) .card__num { text-shadow: 1px 1px rgba(153, 71, 24, 0.8); } .card:nth-child(5) .card__front { background: #3e5eb3; } .card:nth-child(5) .card__num { text-shadow: 1px 1px rgba(42, 64, 122, 0.8); } .card:nth-child(6) .card__front { background: #aa9e5c; } .card:nth-child(6) .card__num { text-shadow: 1px 1px rgba(122, 113, 64, 0.8); } .card:last-child { margin-right: 0; } .card__flipper { cursor: pointer; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border: 3.5px solid rgba(255, 215, 0, 0.6); background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); } .card__front, .card__back { position: absolute; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 340px; } .card__front { transform: rotateY(0); z-index: 2; overflow: hidden; } .card__back { transform: rotateY(180deg) scale(1.1); background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934); display: flex; flex-flow: column wrap; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .card__back span { font-weight: bold; /* Metni kalın yap */ color: white; /* Beyaz renk */ font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__name { font-size: 32px; line-height: 0.9; font-weight: 700; } .card__name span { font-size: 14px; } .card__num { font-size: 100px; margin: 0 8px 0 0; font-weight: 700; } @media (max-width: 700px) { .card__num { font-size: 70px; } } @media (max-width: 700px) { .card { width: 100%; height: 290px; margin-right: 0; float: none; } .card .card__front, .card .card__back { height: 290px; overflow: hidden; } } /* Demo */ main { text-align: center; } main h1, main p { margin: 0 0 12px 0; } main h1 { margin-top: 12px; font-weight: 300; } .fa-github { color: white; font-size: 50px; margin-top: 8px; } .tm-container { display: flex; justify-content: center; align-items: center; } .tm-letter { display:inline-block; font-size:30px; margin: 0 5px; margin-top: 10px; opacity: 0; transform: translateY(0); animation: letter-animation 6s ease-in-out infinite; } @keyframes letter-animation { 0%, 100% { opacity: 1; transform: translateY(0); } 10%, 40%, 60%, 90% { opacity: 1; transform: translateY(-10px); } 20%, 80% { opacity: 1; transform: translateY(0); } } #m-letter { animation-delay: 1.5s; } a { position: relative; display: inline-block; padding: 0px; } a::before { content: ''; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */ box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); filter: blur(4px) brightness(1.5); / opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: -1; } a:hover::before { opacity: 1; } body.hoverEffect { background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a); } #gameCard { width: 300px; height: 450px; margin: 50px auto; padding: 20px; border-radius: 15px; box-shadow: 0 0 50px 10px #FFD700, 0 0 100px 20px #0000FF, 0 0 150px 30px #000033; background: rgba(0,0,0,0.7); color:#FFD700; text-align: center; border: 3px solid #FFD700; } #gameCardLink span { font-size: 18px; margin-right: 5px; font-weight: bold; } #gameCardLink span:last-child { font-size: 0.79em; vertical-align: super; opacity: 0.9; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url('data:image/jpeg;base64,/); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div id="loading-animation"> <div class="loader"></div> </div> <div id="main-content"> <div class="tm-container"> <div class="tm-letter" id="t-letter">T</div> <div class="tm-letter" id="m-letter">M</div> </div> <audio id="flipSound" preload="auto"> <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav"> </audio> <main> <div id="gameCardLink"> <span>G</span> <span>a</span> <span>m</span> <span>e</span> <span> </span> <!-- Boşluk eklemek için span ekledik --> <span> </span> <span>C</span> <span> </span> <span>a</span> <span> </span> <span>r</span> <span> </span> <span>d</span> <span> </span> <span>s</span> <span>®</span> </div> <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p> </main> <ul> <li class="card" > <div class="card__flipper"> <div class="card__front"> <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman"> <p class="card__name"><span>Marvel</span><br>Spiderman</p> <p class="card__num">1</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35" /> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>1.89 Bil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman"> <p class="card__name"><span>DC</span><br>Batman</p> <p class="card__num">2</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>771 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3"> <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p> <p class="card__num">3</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>845.4 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam"> <p class="card__name"><span>DC</span><br>Shazam2</p> <p class="card__num">4</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>462.5 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash"> <p class="card__name"><span>DC</span><br>Flash</p> <p class="card__num">5</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>560.2 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2"> <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p> <p class="card__num">6</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>955.8 Mil. $</span> </div> </div> </li> </ul> </div> </body> <script> var Flipper = (function() { var card = $('.card'); var flipper = card.find('.card__flipper'); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find('.card__flipper'); var offset = thisCard.offset(); var xc = win.width() / 2; var yc = win.height() / 2; var docScroll = $(document).scrollTop(); var cardW = thisCard.outerWidth() / 2; var cardH = thisCard.height() / 2; var transX = xc - offset.left - cardW; var transY = docScroll + yc - offset.top - cardH; // if (offset.top > card.height()) transY = docScroll - offset.top + cardH; if (win.width() <= 700) transY = 0; if (card.hasClass('active')) unflip(); thisCard.css({'z-index': '3'}).addClass('active'); thisFlipper.css({ 'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)', '-webkit-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)', '-ms-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)' }).addClass('active'); return false; }; var unflip = function(e) { card.css({'z-index': '1'}).removeClass('active'); flipper.css({ 'transform': 'none', '-webkit-transform': 'none', '-ms-transform': 'none' }).removeClass('active'); }; var bindActions = function() { card.on('click', flip); win.on('click', unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); </script> <script> <!-- HOOVER FOR TRAILER --> let hoverTimeout; $('.card').hover(function() { const currentCard = $(this); // Store the current card element in a variable hoverTimeout = setTimeout(() => { currentCard.find('.card__front').hide(); currentCard.find('.iframe').show(); var src = currentCard.find('.iframe').attr("src"); currentCard.find('.iframe').attr("src", src); // Add fullscreen functionality currentCard.find('.iframe').on('click', function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) }, function() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find('.card__front').show(); $(this).find('.iframe').hide(); var src = $(this).find('.iframe').attr("src"); if (src) { $(this).find('.iframe').attr("src", src.replace('?autoplay=1', '')); } }); </script> <script> var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); // Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın. $(".card__front").click(function() { console.log('Kart önüne tıklandı', event.target); flipSound.currentTime = 0; flipSound.play(); console.log('dönüş sesi çalındı', event.target); }); $(".card").click(function() { var card = $(this); var cardId = card.find(".card__num").text(); console.log(cardId); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { console.log("is card flag true or false", cardId); if (!cardFlags[cardId]) { startAnimation(div); console.log("started"); cardFlags[cardId] = true; card.addClass("flipped"); } // Adding canvas to back-side var div = document.querySelector('.flipped .card__flipper.active .card__back'); var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } } else { console.log("stopped"); card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); </script> <script> // Body's hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); </script> <script> // Portal effect var p5Instance; function startAnimation(div) { // adding canvas to back-side var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 80); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(230, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } </script> <script> // hiding and showing loading animation function hideLoadingAnimation() { console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor"); var loadingAnimation = document.getElementById("loading-animation"); var mainContent = document.getElementById("main-content"); loadingAnimation.style.display = "none"; mainContent.style.display = "block"; } window.onload = function() { console.log("Sayfa tamamen yüklendi"); hideLoadingAnimation(); }; </script> </html> </code></pre> <p>朋友们大家好，在该问题的图片中，有一张中间颠倒的紫色卡片。上面和下面各有 2 张牌与这张牌重叠。当卡片正面和背面相互重叠时，我如何轻松确保正面半可见的卡片底部不会用胡佛播放预告片（<strong>鼠标事件在这种情况下不起作用</strong>）？用CSS？我正在尝试用非常简单的方法来解决这个问题。</p> <pre><code>card-partially-visible { pointer-events: none; } </code></pre> <p>这样的事情有意义吗？如果是这样，您应该如何确定它是否部分可见？ 有没有现成的功能可以自动检测？</p> <p><a href="https://i.stack.imgur.com/6kFhI.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzZrRmhJLnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>如果将 3D 过渡从 <pre><code>.card__flipper</code></pre> 移动到 <pre><code>.card</code></pre> 本身，您可以给出任何 <pre><code>.card.active</code></pre> <pre><code>::before</code></pre> 和 <pre><code>::after</code></pre> 伪元素，它们将覆盖后面的卡片。</p> <p>在下面的工作示例中，我将伪元素设置为半透明红色（即<pre><code>rgba(255, 0, 0, 0.5)</code></pre>），以便您可以看到它们，但通常您只需将伪元素设置为透明即可：<pre><code>rgba(0, 0, 0, 0)</code></pre>。</p> <hr/> <p><strong>工作示例：</strong></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var Flipper = (function() { var card = $('.card'); var flipper = card.find('.card__flipper'); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find('.card__flipper'); var offset = thisCard.offset(); var xc = win.width() / 2; var yc = win.height() / 2; var docScroll = $(document).scrollTop(); var cardW = thisCard.outerWidth() / 2; var cardH = thisCard.height() / 2; var transX = xc - offset.left - cardW; var transY = docScroll + yc - offset.top - cardH; // if (offset.top > card.height()) transY = docScroll - offset.top + cardH; if (win.width() <= 700) transY = 0; if (card.hasClass('active')) unflip(); thisCard.css({'z-index': '3'}).css({ 'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)' }).addClass('active'); thisFlipper.addClass('active'); return false; }; var unflip = function(e) { card.css({'z-index': '1'}).css({ 'transform': 'none' }).removeClass('active'); flipper.removeClass('active'); }; var bindActions = function() { card.on('click', flip); win.on('click', unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); <!-- HOOVER FOR TRAILER --> let hoverTimeout; $('.card').hover(function() { const currentCard = $(this); // Store the current card element in a variable hoverTimeout = setTimeout(() => { currentCard.find('.card__front').hide(); currentCard.find('.iframe').show(); var src = currentCard.find('.iframe').attr("src"); currentCard.find('.iframe').attr("src", src); // Add fullscreen functionality currentCard.find('.iframe').on('click', function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) }, function() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find('.card__front').show(); $(this).find('.iframe').hide(); var src = $(this).find('.iframe').attr("src"); if (src) { $(this).find('.iframe').attr("src", src.replace('?autoplay=1', '')); } }); var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); // Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın. $(".card__front").click(function() { console.log('Kart önüne tıklandı', event.target); flipSound.currentTime = 0; flipSound.play(); console.log('dönüş sesi çalındı', event.target); }); $(".card").click(function() { var card = $(this); var cardId = card.find(".card__num").text(); console.log(cardId); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { console.log("is card flag true or false", cardId); if (!cardFlags[cardId]) { startAnimation(div); console.log("started"); cardFlags[cardId] = true; card.addClass("flipped"); } // Adding canvas to back-side var div = document.querySelector('.flipped .card__flipper.active .card__back'); var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } } else { console.log("stopped"); card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); // Body's hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); // Portal effect var p5Instance; function startAnimation(div) { // adding canvas to back-side var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 80); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(230, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } // hiding and showing loading animation function hideLoadingAnimation() { console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor"); var loadingAnimation = document.getElementById("loading-animation"); var mainContent = document.getElementById("main-content"); loadingAnimation.style.display = "none"; mainContent.style.display = "block"; } window.onload = function() { console.log("Sayfa tamamen yüklendi"); hideLoadingAnimation(); };</code></pre> <pre><code>.card.active::before, .card.active::after { content: ''; position: relative; z-index: 12; display: block; height: 200px; background-color: rgb(255, 0, 0, 0.5); } .card.active::before { margin-top: -200px; } #main-content { display: none; } * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%); animation: shine 4s linear infinite; color: white; font-family: "Lato"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ul { margin: 0; padding: 0; list-style-type: none; max-width: 800px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; overflow-x: hidden; } .card { float: left; position: relative; width: calc(33.33% - 30px + 9.999px); height: 340px; margin: 0 30px 30px 0; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .card:first-child .card__front { background:#5271C2; } .card__front img { width: 100%; height: 100%; object-fit: cover; } .card:first-child .card__num { text-shadow: 1px 1px rgba(52, 78, 147, 0.8) } .card:nth-child(2) .card__front { background:#35a541; } .card:nth-child(2) .card__num { text-shadow: 1px 1px rgba(34, 107, 42, 0.8); } .card:nth-child(3) { margin-right: 0; } .card:nth-child(3) .card__front { background: #bdb235; } .card:nth-child(3) .card__num { text-shadow: 1px 1px rgba(129, 122, 36, 0.8); } .card:nth-child(4) .card__front { background: #db6623; } .card:nth-child(4) .card__num { text-shadow: 1px 1px rgba(153, 71, 24, 0.8); } .card:nth-child(5) .card__front { background: #3e5eb3; } .card:nth-child(5) .card__num { text-shadow: 1px 1px rgba(42, 64, 122, 0.8); } .card:nth-child(6) .card__front { background: #aa9e5c; } .card:nth-child(6) .card__num { text-shadow: 1px 1px rgba(122, 113, 64, 0.8); } .card:last-child { margin-right: 0; } .card__flipper { cursor: pointer; border: 3.5px solid rgba(255, 215, 0, 0.6); background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .card__front, .card__back { position: absolute; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 340px; } .card__front { transform: rotateY(0); z-index: 2; overflow: hidden; } .card__back { transform: rotateY(180deg) scale(1.1); background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934); display: flex; flex-flow: column wrap; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .card__back span { font-weight: bold; /* Metni kalın yap */ color: white; /* Beyaz renk */ font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__name { font-size: 32px; line-height: 0.9; font-weight: 700; } .card__name span { font-size: 14px; } .card__num { font-size: 100px; margin: 0 8px 0 0; font-weight: 700; } @media (max-width: 700px) { .card__num { font-size: 70px; } } @media (max-width: 700px) { .card { width: 100%; height: 290px; margin-right: 0; float: none; } .card .card__front, .card .card__back { height: 290px; overflow: hidden; } } /* Demo */ main { text-align: center; } main h1, main p { margin: 0 0 12px 0; } main h1 { margin-top: 12px; font-weight: 300; } .fa-github { color: white; font-size: 50px; margin-top: 8px; } .tm-container { display: flex; justify-content: center; align-items: center; } .tm-letter { display:inline-block; font-size:30px; margin: 0 5px; margin-top: 10px; opacity: 0; transform: translateY(0); animation: letter-animation 6s ease-in-out infinite; } @keyframes letter-animation { 0%, 100% { opacity: 1; transform: translateY(0); } 10%, 40%, 60%, 90% { opacity: 1; transform: translateY(-10px); } 20%, 80% { opacity: 1; transform: translateY(0); } } #m-letter { animation-delay: 1.5s; } a { position: relative; display: inline-block; padding: 0px; } a::before { content: ''; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */ box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); filter: blur(4px) brightness(1.5); / opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: -1; } a:hover::before { opacity: 1; } body.hoverEffect { background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a); } #gameCard { width: 300px; height: 450px; margin: 50px auto; padding: 20px; border-radius: 15px; box-shadow: 0 0 50px 10px #FFD700, 0 0 100px 20px #0000FF, 0 0 150px 30px #000033; background: rgba(0,0,0,0.7); color:#FFD700; text-align: center; border: 3px solid #FFD700; } #gameCardLink span { font-size: 18px; margin-right: 5px; font-weight: bold; } #gameCardLink span:last-child { font-size: 0.79em; vertical-align: super; opacity: 0.9; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url('data:image/jpeg;base64,/); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</code></pre> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <div id="loading-animation"> <div class="loader"></div> </div> <div id="main-content"> <div class="tm-container"> <div class="tm-letter" id="t-letter">T</div> <div class="tm-letter" id="m-letter">M</div> </div> <audio id="flipSound" preload="auto"> <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav"> </audio> <main> <div id="gameCardLink"> <span>G</span> <span>a</span> <span>m</span> <span>e</span> <span> </span> <!-- Boşluk eklemek için span ekledik --> <span> </span> <span>C</span> <span> </span> <span>a</span> <span> </span> <span>r</span> <span> </span> <span>d</span> <span> </span> <span>s</span> <span>®</span> </div> <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p> </main> <ul> <li class="card" > <div class="card__flipper"> <div class="card__front"> <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman"> <p class="card__name"><span>Marvel</span><br>Spiderman</p> <p class="card__num">1</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35" /> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>1.89 Bil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman"> <p class="card__name"><span>DC</span><br>Batman</p> <p class="card__num">2</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>771 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3"> <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p> <p class="card__num">3</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>845.4 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam"> <p class="card__name"><span>DC</span><br>Shazam2</p> <p class="card__num">4</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>462.5 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash"> <p class="card__name"><span>DC</span><br>Flash</p> <p class="card__num">5</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>560.2 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2"> <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p> <p class="card__num">6</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>955.8 Mil. $</span> </div> </div> </li> </ul> </div></code></pre> </div> </div> <p></p> </answer> </body></html>
我正在构建一个基于文本的游戏，我正在从 JS 转换它。如何使变量可变？
这最初是一个来自免费代码营的 JS 项目，但为了将其放在我的作品集网站上，我想让它具有交互性。 我尝试过将变量设置为 state 并通过 p 向下传递...
我正在开发一个项目，我需要显示多个图标以及它们之间的连接线。这是我想要实现的目标的示例：
Figma 图片 我已经设法创建布局并添加图标，但我正在努力创建它们之间的连接线。我尝试过使用 CSS 边框和伪元素，但我看不到...