svg 仅与内部窗口一样高，但是当您滚动窗口时，svg 会随之滚动
问题描述 投票：0回答：1
在代码片段中，您可以清楚地看到 svg 没有填充整个视口。
我没有想到或意识到这会如此困难或难以弄清楚。
SVG 是蓝色框，蓝色框应该覆盖整个屏幕直至底部，即红色所在的位置。
我很困惑，我不明白如何让 SVG 填充整个视口。
红色应该在svg后面，svg应该覆盖整个视口
这样查看时，红色应该位于 svg 后面。
整个 svg 应该是可见的。
我不确定为什么背景位于 svg 上方，或者如何在代码中修复该问题。
有办法在代码中解决这个问题吗？
https://jsfiddle.net/6aqjxf0b/1/
如何在代码中解决这个问题？
svg.in-modal {
position:absolute;
left: 0;
right:0;
top: 0;
}
.modal-content {
position: relative;
z-index: 2;
}
.modal.open {
display: flex;
justify-content: center;
align-content: center;
padding: 8px 8px;
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
right: 0;
top: 0;
height:100%;
overflow: auto;
/* Enable scroll if needed */
background-color: red;
}
html
<div id="myModal" class="modal open">
<div class="modal-content">
<div class="blog-pager close">
<a title="Exit" aria-label="Close"></a>
</div>
<div class="ratio-keeper">
<div class="wrap hide">
<div class="video video-frame remove" data-id="AxLxnN6z0Og"></div>
</div>
<div class="panel"></div>
</div>
<div class="playInitial remove"></div>
</div>
<svg class="in-modal" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<use href="#box" />
</svg>
</div>
代码片段：
/*:root {
--color-a: #1155cc;
--color-b: transparent;
--color-c: #1155cc;
--color-d: transparent;
}*/
svg {
--color-a: red;
--color-b: black;
--color-c: red;
--color-d: black;
}
.modal {
display: none;
}
body:has(.modal.open) {
overflow: hidden;
}
.modal.open {
display: flex;
justify-content: center;
align-content: center;
padding: 8px 8px;
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
right: 0;
top: 0;
height:100%;
overflow: auto;
/* Enable scroll if needed */
background-color: red;
/* Fallback color */
/*background-color: rgb(0, 0, 0, 0);*/
/*--color-a: #1155cc;
--color-b: transparent;
--color-c: #1155cc;
--color-d: transparent;
background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(90deg,
var(--color-b) 10px,
#0000 10px 160px,
var(--color-b) 160px),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(90deg,
var(--color-c) 15px,
#0000 15px 155px,
var(--color-c) 155px),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(90deg,
var(--color-d) 20px,
#0000 20px 150px,
var(--color-d) 150px),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(90deg,
var(--color-a) 25px,
#0000 25px 145px,
var(--color-a) 145px),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(90deg,
var(--color-b) 30px,
#0000 30px 140px,
var(--color-b) 140px),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(90deg,
var(--color-c) 35px,
#0000 35px 135px,
var(--color-c) 135px),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(90deg,
var(--color-d) 40px,
#0000 40px 130px,
var(--color-d) 130px),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(90deg,
var(--color-a) 45px,
#0000 45px 125px,
var(--color-a) 125px),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(90deg,
var(--color-b) 50px,
#0000 50px 120px,
var(--color-b) 120px),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(90deg,
var(--color-c) 55px,
#0000 55px 115px,
var(--color-c) 115px),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(90deg,
var(--color-d) 60px,
#0000 60px 110px,
var(--color-d) 110px),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(90deg,
var(--color-a) 65px,
#0000 65px 105px,
var(--color-a) 105px),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px),
linear-gradient(var(--color-a), var(--color-a));
background-size: 165px 165px;*/
}
.modal-content {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
padding: 1px;
}
.modal-content::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #0059dd;
pointer-events: none;
}
:root {
--wide: 8.8%;
--angle1: 0;
--angle2: -90;
}
.panel {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: repeating-linear-gradient(
calc(var(--angle1) * 1deg),
#ffffff00 0,
#ffffff00 var(--wide),
#ffffff1a calc(var(--wide) + 1px),
#0000004d calc(var(--wide) + 2px),
#ffffff00 calc(var(--wide) + 5px)
),
repeating-linear-gradient(
calc(calc(var(--angle2) + 90) * 1deg),
#ffffff00 0,
#ffffff00 var(--wide),
#ffffff1a calc(var(--wide) + 1px),
#0000004d calc(var(--wide) + 2px),
#ffffff00 calc(var(--wide) + 5px)
);
background-color: transparent;
border-bottom: 2px solid #191919;
background-repeat: no-repeat;
z-index: 0;
overflow: hidden;
transform: translateY(0%);
transition: 8s;
}
/*body:has(.splash-screen.hide[style]) .modal-content .panel {
transition-delay: 4s;
transform: translateY(calc(-100% - 1px));
}*/
.panel.slide {
transition-delay: 2s;
transform: translateY(calc(-100% - 1px));
}
/*
All that is needed
body:has(.splash-screen.hide[style]) .modal-content .panel {
transform: translateY(calc(-100% - 1px));
}
window.onload = function() {
const splashScreen = document.querySelector('.splash-screen');
splashScreen.classList.add('hide');
splashScreen.addEventListener('transitionend', function() {
splashScreen.style.display = 'none';
});
};*/
html,
body {
margin: 0;
padding: 0;
}
body {
background: #121212;
padding: 50px 8px;
}
.container {
max-width: 642px;
margin: 15px auto 30px;
padding: 15px;
/*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
border: 1px solid #0059dd;
border-radius: 0;
background: linear-gradient(
45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
),
linear-gradient(
-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
);
background-size: 10px 10px;
}
.ratio-keeper {
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
}
/*.ratio-keeper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}*/
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.blog-pager {
transform: translatey(100%);
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: 1;
/*margin: auto auto 0;*/
pointer-events: initial;
top: auto;
bottom: -1px;
margin: auto;
right: 0;
left: 0;
/*margin: 10px auto 0;*/
width: 37px;
height: 37px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
opacity: 0;
transition: opacity 3s ease-in;
transition-delay: 0s;
pointer-events: none;
}
.blog-pager.visible {
opacity: 1;
pointer-events: auto;
}
.blog-pager::before,
.blog-pager::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.blog-pager::after {
transform: rotate(-45deg);
}
.wrap.hide {
display: none;
}
.splash-screen {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 1;
inset: 0 0 0 0;
background: transparent;
opacity: 1;
/* Set transition duration to 1 seconds */
pointer-events: none;
/*dissable mouse clicking */
cursor: default;
}
.splash-screen.hide {
opacity: 0;
transition-delay: 1s;
/* Add a delay of 1 seconds before the opacity changes to 0 */
pointer-events: none;
/* Re-enable mouse clicking after 1 seconds */
cursor: default;
}
.panel-left,
.panel-right {
position: fixed;
height: 100%;
/*width: 50%;*/
width: calc(50% + 1px);
/* rounding error fix */
top: 0%;
overflow: hidden;
z-index: 0;
transform: translateX(0);
transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 1s;
}
.panel-left.slide {
left: 0;
}
.panel-right.slide {
right: 0;
}
.panel-left svg,
.panel-right svg {
width: calc(200% - 2px);
position: absolute;
top: 0;
}
.panel-left svg {
left: 0;
}
.panel-right svg {
right: 0;
}
/*.panel-left::before,
.panel-right::before {
content: "";
position: fixed;
height: 100%;
width: 200%;
top: 0;
left: 0;
--color-a: #1155cc;
--color-b: transparent;
--color-c: #1155cc;
--color-d: transparent;
background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(90deg,
var(--color-b) 10px,
#0000 10px 160px,
var(--color-b) 160px),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(90deg,
var(--color-c) 15px,
#0000 15px 155px,
var(--color-c) 155px),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(90deg,
var(--color-d) 20px,
#0000 20px 150px,
var(--color-d) 150px),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(90deg,
var(--color-a) 25px,
#0000 25px 145px,
var(--color-a) 145px),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(90deg,
var(--color-b) 30px,
#0000 30px 140px,
var(--color-b) 140px),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(90deg,
var(--color-c) 35px,
#0000 35px 135px,
var(--color-c) 135px),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(90deg,
var(--color-d) 40px,
#0000 40px 130px,
var(--color-d) 130px),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(90deg,
var(--color-a) 45px,
#0000 45px 125px,
var(--color-a) 125px),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(90deg,
var(--color-b) 50px,
#0000 50px 120px,
var(--color-b) 120px),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(90deg,
var(--color-c) 55px,
#0000 55px 115px,
var(--color-c) 115px),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(90deg,
var(--color-d) 60px,
#0000 60px 110px,
var(--color-d) 110px),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(90deg,
var(--color-a) 65px,
#0000 65px 105px,
var(--color-a) 105px),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px),
linear-gradient(var(--color-a), var(--color-a));
background-size: 165px 165px;
}
.panel-right::before {
left: -100%;
}*/
.modal:not(.open) ~ .panel-left {
transform: translateX(calc(-100% - 1px));
}
.modal:not(.open) ~ .panel-right {
transform: translateX(calc(100% + 1px));
}
.inner {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 200%;
position: absolute;
left: 0;
z-index: 2;
}
.panel-right .inner {
left: -100%;
}
.container2 {
max-width: 360px;
border: 1px solid #ccc;
}
.container2 div {
display: flex;
justify-content: center;
}
.container2 img {
display: block;
margin: auto;
width: 33.33%;
height: auto;
}
.st0 {
stroke: rgb(0, 0, 0);
stroke-width: 0px;
fill: rgb(17, 85, 204);
}
.st1 {
fill: none;
stroke-width: 5px;
stroke: rgb(17, 85, 204);
}
.panelsvg {
position: fixed;
left: -100vh;
top: -100vh;
pointer-events: none;
opacity: 0;
}
svg.in-modal {
position:absolute;
left: 0;
right:0;
top: 0;
}
.modal-content {
position: relative;
z-index: 2;
}<div id="myModal" class="modal open">
<div class="modal-content">
<div class="blog-pager close">
<a title="Exit" aria-label="Close"></a>
</div>
<div class="ratio-keeper">
<div class="wrap hide">
<div class="video video-frame remove" data-id="AxLxnN6z0Og"></div>
</div>
<div class="panel"></div>
</div>
<div class="playInitial remove"></div>
</div>
<svg class="in-modal" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<use href="#box" />
</svg>
</div>
<!-- end modal -->
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
</div>
<div class="play1"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="play2"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="play3"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="play4"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="play5" data-id="AxLxnN6z0Og"></div>
</div>
<div class="slide panel-left">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<use href="#box" />
</svg>
</div>
<div class="slide panel-right">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<use href="#box" />
</svg>
</div>
<svg class="panelsvg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g id="box">
<defs>
<pattern id="repeatedPattern" patternUnits="userSpaceOnUse" width="165" height="165">
<rect x="80" y="80" width="10" height="10" class="st0" />
<rect x="72.5" y="72.5" width="25" height="25" class="st1" />
<rect x="62.5" y="62.5" width="45" height="45" class="st1" />
<rect x="52.5" y="52.5" width="65" height="65" class="st1" />
<rect x="42.5" y="42.5" width="85" height="85" class="st1" />
<rect x="32.5" y="32.5" width="105" height="105" class="st1" />
<rect x="22.5" y="22.5" width="125" height="125" class="st1" />
<rect x="12.5" y="12.5" width="145" height="145" class="st1" />
<rect x="2.5" y="2.5" width="165" height="165" class="st1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#repeatedPattern)" />
</g>
</svg>1个回答
0
投票
投票
设置
svg.in-modal{ position: fixed; }/*:root {
--color-a: #1155cc;
--color-b: transparent;
--color-c: #1155cc;
--color-d: transparent;
}*/
svg {
--color-a: red;
--color-b: black;
--color-c: red;
--color-d: black;
}
.modal {
display: none;
}
body:has(.modal.open) {
overflow: hidden;
}
.modal.open {
display: flex;
justify-content: center;
align-content: center;
padding: 8px 8px;
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
right: 0;
top: 0;
height:100%;
overflow: auto;
/* Enable scroll if needed */
background-color: red;
/* Fallback color */
/*background-color: rgb(0, 0, 0, 0);*/
/*--color-a: #1155cc;
--color-b: transparent;
--color-c: #1155cc;
--color-d: transparent;
background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(90deg,
var(--color-b) 10px,
#0000 10px 160px,
var(--color-b) 160px),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(90deg,
var(--color-c) 15px,
#0000 15px 155px,
var(--color-c) 155px),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(90deg,
var(--color-d) 20px,
#0000 20px 150px,
var(--color-d) 150px),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(90deg,
var(--color-a) 25px,
#0000 25px 145px,
var(--color-a) 145px),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(90deg,
var(--color-b) 30px,
#0000 30px 140px,
var(--color-b) 140px),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(90deg,
var(--color-c) 35px,
#0000 35px 135px,
var(--color-c) 135px),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(90deg,
var(--color-d) 40px,
#0000 40px 130px,
var(--color-d) 130px),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(90deg,
var(--color-a) 45px,
#0000 45px 125px,
var(--color-a) 125px),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(90deg,
var(--color-b) 50px,
#0000 50px 120px,
var(--color-b) 120px),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(90deg,
var(--color-c) 55px,
#0000 55px 115px,
var(--color-c) 115px),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(90deg,
var(--color-d) 60px,
#0000 60px 110px,
var(--color-d) 110px),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(90deg,
var(--color-a) 65px,
#0000 65px 105px,
var(--color-a) 105px),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px),
linear-gradient(var(--color-a), var(--color-a));
background-size: 165px 165px;*/
}
.modal-content {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
padding: 1px;
}
.modal-content::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #0059dd;
pointer-events: none;
}
:root {
--wide: 8.8%;
--angle1: 0;
--angle2: -90;
}
.panel {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: repeating-linear-gradient(
calc(var(--angle1) * 1deg),
#ffffff00 0,
#ffffff00 var(--wide),
#ffffff1a calc(var(--wide) + 1px),
#0000004d calc(var(--wide) + 2px),
#ffffff00 calc(var(--wide) + 5px)
),
repeating-linear-gradient(
calc(calc(var(--angle2) + 90) * 1deg),
#ffffff00 0,
#ffffff00 var(--wide),
#ffffff1a calc(var(--wide) + 1px),
#0000004d calc(var(--wide) + 2px),
#ffffff00 calc(var(--wide) + 5px)
);
background-color: transparent;
border-bottom: 2px solid #191919;
background-repeat: no-repeat;
z-index: 0;
overflow: hidden;
transform: translateY(0%);
transition: 8s;
}
/*body:has(.splash-screen.hide[style]) .modal-content .panel {
transition-delay: 4s;
transform: translateY(calc(-100% - 1px));
}*/
.panel.slide {
transition-delay: 2s;
transform: translateY(calc(-100% - 1px));
}
/*
All that is needed
body:has(.splash-screen.hide[style]) .modal-content .panel {
transform: translateY(calc(-100% - 1px));
}
window.onload = function() {
const splashScreen = document.querySelector('.splash-screen');
splashScreen.classList.add('hide');
splashScreen.addEventListener('transitionend', function() {
splashScreen.style.display = 'none';
});
};*/
html,
body {
margin: 0;
padding: 0;
}
body {
background: #121212;
padding: 50px 8px;
}
.container {
max-width: 642px;
margin: 15px auto 30px;
padding: 15px;
/*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
border: 1px solid #0059dd;
border-radius: 0;
background: linear-gradient(
45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
),
linear-gradient(
-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
);
background-size: 10px 10px;
}
.ratio-keeper {
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
}
/*.ratio-keeper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}*/
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.blog-pager {
transform: translatey(100%);
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: 1;
/*margin: auto auto 0;*/
pointer-events: initial;
top: auto;
bottom: -1px;
margin: auto;
right: 0;
left: 0;
/*margin: 10px auto 0;*/
width: 37px;
height: 37px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
opacity: 0;
transition: opacity 3s ease-in;
transition-delay: 0s;
pointer-events: none;
}
.blog-pager.visible {
opacity: 1;
pointer-events: auto;
}
.blog-pager::before,
.blog-pager::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.blog-pager::after {
transform: rotate(-45deg);
}
.wrap.hide {
display: none;
}
.splash-screen {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 1;
inset: 0 0 0 0;
background: transparent;
opacity: 1;
/* Set transition duration to 1 seconds */
pointer-events: none;
/*dissable mouse clicking */
cursor: default;
}
.splash-screen.hide {
opacity: 0;
transition-delay: 1s;
/* Add a delay of 1 seconds before the opacity changes to 0 */
pointer-events: none;
/* Re-enable mouse clicking after 1 seconds */
cursor: default;
}
.panel-left,
.panel-right {
position: fixed;
height: 100%;
/*width: 50%;*/
width: calc(50% + 1px);
/* rounding error fix */
top: 0%;
overflow: hidden;
z-index: 0;
transform: translateX(0);
transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 1s;
}
.panel-left.slide {
left: 0;
}
.panel-right.slide {
right: 0;
}
.panel-left svg,
.panel-right svg {
width: calc(200% - 2px);
position: absolute;
top: 0;
}
.panel-left svg {
left: 0;
}
.panel-right svg {
right: 0;
}
/*.panel-left::before,
.panel-right::before {
content: "";
position: fixed;
height: 100%;
width: 200%;
top: 0;
left: 0;
--color-a: #1155cc;
--color-b: transparent;
--color-c: #1155cc;
--color-d: transparent;
background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(90deg,
var(--color-b) 10px,
#0000 10px 160px,
var(--color-b) 160px),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(90deg,
var(--color-c) 15px,
#0000 15px 155px,
var(--color-c) 155px),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(90deg,
var(--color-d) 20px,
#0000 20px 150px,
var(--color-d) 150px),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(90deg,
var(--color-a) 25px,
#0000 25px 145px,
var(--color-a) 145px),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(90deg,
var(--color-b) 30px,
#0000 30px 140px,
var(--color-b) 140px),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(90deg,
var(--color-c) 35px,
#0000 35px 135px,
var(--color-c) 135px),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(90deg,
var(--color-d) 40px,
#0000 40px 130px,
var(--color-d) 130px),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(90deg,
var(--color-a) 45px,
#0000 45px 125px,
var(--color-a) 125px),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(90deg,
var(--color-b) 50px,
#0000 50px 120px,
var(--color-b) 120px),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(90deg,
var(--color-c) 55px,
#0000 55px 115px,
var(--color-c) 115px),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(90deg,
var(--color-d) 60px,
#0000 60px 110px,
var(--color-d) 110px),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(90deg,
var(--color-a) 65px,
#0000 65px 105px,
var(--color-a) 105px),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px),
linear-gradient(var(--color-a), var(--color-a));
background-size: 165px 165px;
}
.panel-right::before {
left: -100%;
}*/
.modal:not(.open) ~ .panel-left {
transform: translateX(calc(-100% - 1px));
}
.modal:not(.open) ~ .panel-right {
transform: translateX(calc(100% + 1px));
}
.inner {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 200%;
position: absolute;
left: 0;
z-index: 2;
}
.panel-right .inner {
left: -100%;
}
.container2 {
max-width: 360px;
border: 1px solid #ccc;
}
.container2 div {
display: flex;
justify-content: center;
}
.container2 img {
display: block;
margin: auto;
width: 33.33%;
height: auto;
}
.st0 {
stroke: rgb(0, 0, 0);
stroke-width: 0px;
fill: rgb(17, 85, 204);
}
.st1 {
fill: none;
stroke-width: 5px;
stroke: rgb(17, 85, 204);
}
.panelsvg {
position: fixed;
left: -100vh;
top: -100vh;
pointer-events: none;
opacity: 0;
}
svg.in-modal {
position:fixed;
left: 0;
right:0;
top: 0;
}
.modal-content {
position: relative;
z-index: 2;
}<div id="myModal" class="modal open">
<div class="modal-content">
<div class="blog-pager close">
<a title="Exit" aria-label="Close"></a>
</div>
<div class="ratio-keeper">
<div class="wrap hide">
<div class="video video-frame remove" data-id="AxLxnN6z0Og"></div>
</div>
<div class="panel"></div>
</div>
<div class="playInitial remove"></div>
</div>
<svg class="in-modal" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<use href="#box" />
</svg>
</div>
<!-- end modal -->
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
</div>
<div class="play1"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="play2"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="play3"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="play4"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="play5" data-id="AxLxnN6z0Og"></div>
</div>
<div class="slide panel-left">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<use href="#box" />
</svg>
</div>
<div class="slide panel-right">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<use href="#box" />
</svg>
</div>
<svg class="panelsvg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g id="box">
<defs>
<pattern id="repeatedPattern" patternUnits="userSpaceOnUse" width="165" height="165">
<rect x="80" y="80" width="10" height="10" class="st0" />
<rect x="72.5" y="72.5" width="25" height="25" class="st1" />
<rect x="62.5" y="62.5" width="45" height="45" class="st1" />
<rect x="52.5" y="52.5" width="65" height="65" class="st1" />
<rect x="42.5" y="42.5" width="85" height="85" class="st1" />
<rect x="32.5" y="32.5" width="105" height="105" class="st1" />
<rect x="22.5" y="22.5" width="125" height="125" class="st1" />
<rect x="12.5" y="12.5" width="145" height="145" class="st1" />
<rect x="2.5" y="2.5" width="165" height="165" class="st1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#repeatedPattern)" />
</g>
</svg>最新问题
- nginx 重定向到索引页面
- 如何在Python中计算math.sqrt(-1)？
- Angular 19 独立组件错误：尽管导入了 HttpClientModule，“没有 _HttpClient 的提供程序”
- 不同加数问题贪心算法
- 我无法在 Ajax 中执行 Perl 脚本
- AVX2 / gcc：通过使用不同的寄存器来提高CPU级并行性
- 我无法在ajax中执行perl脚本
- 实体框架。直接编辑集合导航属性时的奇怪行为
- 在Python中检测比例参考线坐标
- 如何防止我的Python脚本在Windows上运行后立即关闭？
- Gridgain9 是 ignite2 还是 ignite3 的下游
- 如何修改JavaFX中的ChoiceBox复选标记？
- 在pygame中实时播放带有alpha通道和同步音频的两个混合视频？
- 如何在cypher-shell中使用环境变量NEO4J_PASSWORD
- ASP Classic IPN 侦听器可以工作，但现在不行了
- 如何实际使用 cv2.estimateAffine3D 在 python 中对齐 3d 点？
- 如何在 R 中生成具有跨多个组的 FDR 校正 P 值的分层汇总表
- 我无法使用 Exact Alarm 进行颤振本地通知
- Azure OpenAI Studio Playground：在向任何函数提交输出时，我的助手总是返回未定义的错误
- 如何对Bull.js与Redis服务器的连接实现完整而非部分的TLS保护？
© www.soinside.com 2019 - 2024. All rights reserved.