web-frontend 相关问题

更通用的前端标记的细化。在Web应用程序中，这通常意味着HTML，CSS和JavaScript

我对 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。

javascript html css frontend web-frontend

回答 1 投票 0

如何删除html原生对话框的宽度

我想在小屏幕上以全宽和全高显示对话框。这似乎有效。然而，当我尝试在较大的屏幕中删除宽度和高度（通过使用未设置、自动或初始）时，它

html css web-frontend

回答 1 投票 0

将 tailwind 和外部 CSS 转换为内联样式

我正在使用顺风类以及外部样式表中定义的自定义类。我需要将代码转换为内联样式以便在其他地方使用。我怎样才能做到这一点？ 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 转换为内联样式以达到某种目的。你有解决这个问题吗

html css frontend web-frontend

回答 1 投票 0

同时旋转和移动球的 CSS 动画

我有一个简单的 React 应用程序，其中的 div 包含 SVG 球图像。将鼠标悬停在图像上时，我希望它能够同时平滑地旋转和向左移动。当悬停状态为 false 时，我希望它腐烂...

css web-frontend react-animations

回答 3 投票 0

react：功能组件内部的方法无法获取useState变量的最新值

我有以下代码：从“preact/hooks”导入{ useState，useEffect }；导出函数 App() { const [pageContent, setPageContent] = useState(""); useEffect(()...

javascript reactjs web-frontend

回答 1 投票 0

如何用VoiceOver播报SwiperJS幻灯片内容？

我正在使用 SwiperJS React 组件，并希望在使用 VoiceOver 看到幻灯片内容时宣布它们。有没有办法做到这一点？现在用户在 cl...

javascript reactjs accessibility swiper.js web-frontend

回答 1 投票 0

辅助功能：如何通过 VoiceOver 播报 SwiperJS 幻灯片内容？

我正在使用 SwiperJS React 组件，并希望在使用 VoiceOver 看到幻灯片内容时宣布它们。有没有办法做到这一点？现在用户在 cl...

javascript reactjs accessibility swiper.js web-frontend

回答 1 投票 0

使用 IIFE 将模块添加到命名空间

我刚刚学习前端，然后我想出了一种使用 IIFE 创建模块并将其注册到命名空间的方法。从下面的代码来看，我仍然不明白一些事情：为什么

javascript function module frontend web-frontend

回答 1 投票 0

无法检测卡片重叠状态的问题

<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>  <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" />  <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"/>  <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"/>  <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"/>  <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"/>  <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"/>  <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>  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();  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>  <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" />  <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"/>  <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"/>  <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"/>  <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"/>  <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"/>  <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>

javascript frontend backend z-index web-frontend

回答 0 投票 0

JS/未检测到卡片重叠状态的问题

<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>  <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" />  <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"/>  <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"/>  <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"/>  <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"/>  <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"/>  <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>  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();  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>  <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" />  <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"/>  <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"/>  <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"/>  <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"/>  <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"/>  <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>

javascript frontend backend z-index web-frontend

回答 0 投票 0

我正在构建一个基于文本的游戏，我正在从 JS 转换它。如何使变量可变？

这最初是一个来自免费代码营的 JS 项目，但为了将其放在我的作品集网站上，我想让它具有交互性。我尝试过将变量设置为 state 并通过 p 向下传递...

reactjs react-hooks web-frontend

回答 1 投票 0

我正在开发一个项目，我需要显示多个图标以及它们之间的连接线。这是我想要实现的目标的示例：

Figma 图片我已经设法创建布局并添加图标，但我正在努力创建它们之间的连接线。我尝试过使用 CSS 边框和伪元素，但我看不到...

javascript html css css-selectors web-frontend

回答 1 投票 0

如何使用Arc浏览器在vscode中调试nodejs应用程序？

我最近开始使用 Arc 浏览器，并希望将其与 VS-Code 一起使用进行开发。我遇到了让它与

node.js debugging visual-studio-debugging web-frontend arc-browser

回答 1 投票 0

if(isset($_POST 没有正确调用我的提交按钮，我找不到原因

<body> <?php include("php/config.php"); if(isset($_POST['submit'])){ // $username =$_POST['username']; // $PASSWORD =$_POST['PASSWORD']; // $title =$_POST['title']; // $first_name =$_POST['first_name']; // $last_name =$_POST['last_name']; // $gender =$_POST['gender']; // $adress1 =$_POST['adress1']; // $postcode =$_POST['postcode']; $email = $_POST['email']; // $telephone =$_POST['telephone']; // $profile_blob =$_POST['profile_blob']; $verify_query = mysqli_query($con, " SELECT email FROM users WHERE email ='$email'"); if(mysqli_num_rows($verify_query) != 0 ){ echo "<div class='message'> <p> This email is used, Try another</p> </div> <br>"; echo "<a href ='javascript:self.history.back()' <button class ='btn'> Go Back </button>"; } else{ // mysqli_query($con,"INSERT INTO users(username,PASSWORD,title,first_name,last_name,gender,adress1,postcode,email,telephone)Values('$username','$PASSWORD','$title','$first_name','$last_name','$gender','$adress1','$postcode','$email','$telephone')")or die("Error Occured"); mysqli_query($con,"INSERT INTO users(email)Values('$email')")or die("Error Occured"); echo "<div class='message'> <p> Success</p> </div> <br>"; echo "<a href ='index.php' <button class 'btn'> Go Back </button>"; } }else{ ?> <nav class="nav-top"> <img src="images/Logo.PNG" class="logo">  <ul> <li><a href="Main menu.html">RentmyCaravan.io</a></li>  </ul> <img src="images/profile photo.PNG" class="user-pic" onclick="toggleMenu()">  <div class="sub-menu-wrap" id="subMenu">  <div class="sub-menu">  <div class="user-info">  <img src="images/profile photo.PNG"> <h2>Dannissoepic</h2> </div> <hr>  <a href="ListView.html" class="sub-menu-link">  <img src="images/list.PNG">  <p>List view</p>  <span>></span>  </a> <a href="AddScreen.html" class="sub-menu-link"> <img src="images/+.PNG"> <p>Add a caravan</p> <span>></span> </a> <a href="Edit.html" class="sub-menu-link"> <img src="images/empty profile.PNG"> <p>Profile</p> <span>></span> </a> <hr> <a href="" class="sub-menu-link"> <img src="images/setting.PNG"> <p>Settings</p> <span>></span> </a> <a href="Main menu.html" class="sub-menu-link"> <img src="images/signout.PNG"> <p>Sign out</p> <span>></span> </a> <hr> </div> </div> </nav> <nav class="nav-site-progress"> <a href="#">Main Menu</a> <a href="#">List View</a> <hr> <br> </nav> </header> <div class="site"> <div class="box"> ----Register new user---- <br><br> Username <br> <input type="text" id="username" name="username"><br><br> Password <br> <input type="text" id="PASSWORD" name="PASSWORD"><br><br> Title <br> <input type="text" id="title" name="title"><br><br> First Name <br> <input type="text" id="first_name" name="first_name"><br><br> Last Name <br> <input type="text" id="last_name" name="last_name"><br><br> Gender <input type="text" id="gender" name="gender"> <input type="checkbox" id="fname6.2" name="fname6.2"><br><br> Address <br> <input type="text" id="adress1" name="adress1"><br><br> Postcode <br> <input type="text" id="postcode" name="postcode"><br><br> Email <br> <input type="email" id="email" name="email"><br><br> Phone Number <br> <input type="tel" id="telephone" name="telephone"><br><br> input profile image <br><br> <div style="background-color: #c7c9c9; border: 1px solid black; width: 40%; height: 110px;margin-left: auto; margin-right: auto;"> <input type="image"id ="fname12" name="fname12" style="border-color: black; width: 70px; height: 50px; text-align: center; background-color: white; " value="+"><br><br> </div> <br><br> <input type="submit" name="submit" value="Register" class="btn-secondary"> </div> </div> <script> let subMenu = document.getElementById("subMenu"); //let submenu be called by the id submenu function toggleMenu() //The actual function being called { subMenu.classList.toggle("open-menu"); //toggle the open menu css class } </script> <div> <?php } ?> </div> </body> 提供的代码主体，我使用了 not (!) 来强制它，并且我知道另一端的代码可以工作。但通过尝试不同的事情，有时我会收到特定字段（例如电子邮件）的未识别关键错误消息，但如果认为这是页面在按钮之前加载请求的结果。确保您有form喜欢 <form method="post" action="yourpage.php"> Gender <input type="text" id="gender" name="gender"> <input type="checkbox" id="fname6.2" name="fname6.2"><br><br> Address <br> <input type="text" id="adress1" name="adress1"><br><br> Postcode <br> <input type="text" id="postcode" name="postcode"><br><br> Email <br> <input type="email" id="email" name="email"><br><br> Phone Number <br> <input type="tel" id="telephone" name="telephone"><br><br> input profile image <br><br> <div style="background-color: #c7c9c9; border: 1px solid black; width: 40%; height: 110px;margin-left: auto; margin-right: auto;"> <input type="image"id ="fname12" name="fname12" style="border-color: black; width: 70px; height: 50px; text-align: center; background-color: white; " value="+"><br><br> </div> <br><br> <input type="submit" name="submit" value="Register" class="btn-secondary"> </form> 由于您的按钮现在位于 form 内，通过单击它，您的表单将被发布（针对您指定的操作，该操作需要与您想要将请求发送到的终点相匹配，如果它留空为action="" 那么帖子将针对当前页面，在这种特定情况下您似乎需要该页面）并且由于它的名称为 submit，因此这将被传递，并且在这种情况下您的 if 应评估为 true。

php html web-frontend

回答 1 投票 0

MUI - 单击文本字段中的任意位置时打开日期选择器

我有一个日期选择器，当用户单击字段中的任意位置而不仅仅是日历图标时，我想显示该日期选择器。这是选择器导出函数 DatePickerField(props) { ...... 返回（ ...

css reactjs material-ui web-frontend

回答 4 投票 0

Vue 3.0 组件未应用 tailwind 中的类

我遇到的问题是想要使用 Tailwindcss 来设置我的 Vue 组件的样式，但它没有应用它们。它适用于我的视图和 App.vue，但不知何故不适用于组件。我遵循...

vuejs3 vue-component tailwind-css web-frontend

回答 1 投票 0

如何使用按钮来使用成帧器运动启动卡片滑动轮播的动画？

我正在尝试使用成帧器运动来制作图像滑动轮播的动画。我希望动画仅在按下按钮时才开始。问题是动画在我点击 b 之前就开始了...