javascript - 防止在蓝色圆圈svg之外单击
问题描述
现在你可以在蓝色圆圈外点击,
我该如何防止呢?
所以它只在单击 svg 本身时打开?
含义,空白和svg中的所有内容?
这就是我想要做的。
防止在蓝色 svg 圆圈之外单击。
我怎么能在代码中做到这一点?
它是如何工作的,在点击蓝色 svg 后,它们会打开。
https://jsfiddle.net/s5bzampu/
const manageCover = (function makeManageCover() {
const config = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function hideAll(elements) {
elements.forEach(hide);
}
function showCovers(playButton) {
const cover = playButton.parentElement;
cover.classList.add("active");
show(cover);
}
function coverClickHandler(evt) {
hideAll(config.containers);
const cover = evt.currentTarget;
showCovers(cover);
document.querySelector('.outer').classList.add('isOpen');
}
function addClickToButtons(playButtons) {
playButtons.forEach(function addEventHandler(playButton) {
playButton.addEventListener("click", coverClickHandler);
});
}
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}
function init(selectors) {
config.containers = document.querySelectorAll(selectors.container);
const playButtons = document.querySelectorAll(selectors.playButton);
addClickToButtons(playButtons);
}
return {
addCoverHandler,
init,
show
};
}());
const videoPlayer = (function makeVideoPlayer() {
const players = [];
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
}
function addPlayer(video, settings, videoIds = video.dataset.id) {
const videoId = !Array.isArray(videoIds) && videoIds;
const playlist = Array.isArray(videoIds) && videoIds;
const config = {
host: "https://www.youtube-nocookie.com",
videoId
};
config.playerVars = {
playlist: playlist || undefined
};
config.events = {
"onReady": onPlayerReady
};
const defaultOptions = config;
const playerOptions = Object.assign({}, defaultOptions, settings);
players.push(new YT.Player(video, playerOptions));
}
return {
addPlayer
};
}());
const managePlayer = (function makeManagePlayer() {
const config = {
height: 600,
width: 360
};
config.playerVars = {
autoplay: 0,
controls: 1,
disablekb: 1,
enablejsapi: 1,
fs: 0,
iv_load_policy: 3,
rel: 0
};
function show(el) {
el.classList.remove("hide");
}
function createPlayerOptions(settings) {
function paramInOptions(opts, param) {
if (settings[param] !== undefined) {
opts[param] = settings[param];
delete settings[param];
}
return opts;
}
const optionParams = ["width", "height", "playlist", "host", "videoid"];
const defaultOptions = config;
const preferred = optionParams.reduce(paramInOptions, {});
const playerOptions = Object.assign({}, defaultOptions, preferred);
// settings should now only consist of playerVars
const defaultVars = config.playerVars;
const playerVars = settings.playerVars;
config.playerVars = Object.assign({}, defaultVars, playerVars);
return playerOptions;
}
function createPlayer(videoWrapper, settings = {}, videoIds = "") {
const video = videoWrapper.querySelector(".video");
if (!videoIds) {
videoIds = video.dataset.id;
}
const playerOptions = createPlayerOptions(settings);
return videoPlayer.addPlayer(video, playerOptions, videoIds);
}
function createCoverClickHandler(playerSettings, videoIds) {
return function coverClickHandler(evt) {
const cover = evt.currentTarget;
const wrapper = cover.nextElementSibling;
show(wrapper);
const player = createPlayer(wrapper, playerSettings, videoIds);
wrapper.player = player;
};
}
function addPlayer(coverSelector, playerSettings, videoIds) {
const clickHandler = createCoverClickHandler(playerSettings, videoIds);
manageCover.addCoverHandler(coverSelector, clickHandler);
}
function addPlayerRandomVideo(coverSelector, playerSettings, videoIds) {
const index = Math.floor(Math.random() * videoIds.length);
const videoId = videoIds[index];
const clickHandler = createCoverClickHandler(playerSettings, videoId);
manageCover.addCoverHandler(coverSelector, clickHandler);
}
function init(playerOptions) {
Object.assign(config, playerOptions);
}
return {
add: addPlayer,
addRandom: addPlayerRandomVideo,
init
};
}());
function onYouTubeIframeAPIReady() {
managePlayer.init({
playerVars: {
autoplay: 0
}
});
managePlayer.addRandom(".playa", {
height: 207,
start: 45,
width: 277
}, [
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"-Xgi_way56U",
"CHahce95B1g"
]);
managePlayer.add(".playb", {
height: 207,
width: 277
});
managePlayer.addRandom(".playc", {
height: 207,
width: 277
}, [
"0dgNc5S8cLI",
"-Xgi_way56U",
"CHahce95B1g"
]);
managePlayer.add(".playd", {
height: 207,
width: 277
});
managePlayer.add(".playe", {
height: 207,
width: 277
});
managePlayer.add(".playf", {
height: 207,
width: 277
});
managePlayer.add(".playg", {
height: 207,
width: 277
});
managePlayer.add(".playh", {
height: 207,
width: 277
});
managePlayer.add(".playi", {
height: 207,
width: 277
});
manageCover.init({
container: ".container",
playButton: ".thePlay"
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: white;
animation: fade 2s ease 0s forwards;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.outer {
display: flex;
flex-wrap: wrap;
min-height: 100%;
width: 310px;
box-sizing: border-box;
justify-content: center;
align-content: center;
margin: auto;
gap: 20px;
/*list-style:none;*/
padding: 0;
}
.outer.isOpen {
display: flex;
width: auto;
align-content: stretch;
}
.container {
display: flex;
justify-content: center;
}
.container.active {
flex: 1 0 0;
animation: fadebody 5s ease 0s forwards;
background-size: 165px 165px;
background-image: linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, teal 5px, #0000 5px), linear-gradient(black 10px, #0000 10px 160px, black 160px), linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px), linear-gradient(orange 15px, #0000 15px 155px, orange 155px), linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px), linear-gradient(black 20px, #0000 20px 150px, black 150px), linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px), linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px), linear-gradient(black 30px, #0000 30px 140px, black 140px), linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px), linear-gradient(orange 35px, #0000 35px 135px, orange 135px), linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px), linear-gradient(black 40px, #0000 40px 130px, black 130px), linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px), linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px), linear-gradient(black 50px, #0000 50px 120px, black 120px), linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px), linear-gradient(orange 55px, #0000 55px 115px, orange 115px), linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px), linear-gradient(black 60px, #0000 60px 110px, black 110px), linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px), linear-gradient(teal 65px, #0000 65px 105px, teal 105px), linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px), linear-gradient(black 70px, #0000 70px 100px, black 100px), linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px), linear-gradient(orange 75px, #0000 75px 95px, orange 95px), linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px), linear-gradient(black 80px, #0000 80px 90px, black 90px), linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px), linear-gradient(teal, teal);
}
.thePlay{
/*margin: auto 20px;*/
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
fill: blue;
}
/* when container is active hide the svg */
.container.active .thePlay {
display: none;
}
.inner-container {
display: none;
}
/* when container is active hide the svg and show the inner container*/
.container.active .thePlay {
display: none;
}
.container.active .inner-container {
display: flex;
}
.container.active .inner-container.curtain {
display: block;
}
@keyframes fadebody {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.curtain {
position: relative;
max-width: 640px;
margin: auto;
flex: 1 0 0%;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: calc(50% + 1px);
/* rounding error fix */
top: 0%;
transition: all ease 10s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("https://picsum.photos/id/26/1920/1080");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}
.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
background-image: url("https://picsum.photos/id/27/1920/1080");
}
.curtain3 .panel-left::before,
.curtain3 .panel-right::before {
background-image: url("https://picsum.photos/id/27/1920/1080");
}
.panel-right::before {
left: -100%;
}
.container.active .curtain .panel-left {
animation: curtain1 8s forwards;
animation-delay: 1s;
}
@keyframes curtain1 {
to {
transform: translateX(-100%);
}
}
.container.active .curtain .panel-right {
animation: curtain2 8s forwards;
animation-delay: 1s;
}
@keyframes curtain2 {
to {
transform: translateX(100%);
}
}
@keyframes curtain3 {
to {
transform: translateX(100%);
}
}
@keyframes curtain4 {
to {
transform: translateX(100%);
}
}
@keyframes curtain5 {
to {
transform: translateX(100%);
}
}
@keyframes curtain6 {
to {
transform: translateX(100%);
}
}
@keyframes curtain7 {
to {
transform: translateX(100%);
}
}
@keyframes curtain8 {
to {
transform: translateX(100%);
}
}
@keyframes curtain9 {
to {
transform: translateX(100%);
}
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
border-radius: 25px;
margin: auto;
overflow: hidden;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hide {
display: none;
}
<ul class="outer">
<li class="container">
<svg class="playa thePlay" width="64" height="64" viewBox="0 0 64 64">
<g id="play">
<title>Play</title>
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</g>
</svg>
<div class="inner-container curtain curtain1">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playb thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain2">
<div class="ratio-keeper">
<div class="wrapb">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container with-curtain">
<svg class="playc thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain3">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playd thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain4">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playe thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain5">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playf thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain6">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playg thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain7">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playh thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain8">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playi thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain9">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
</ul>
解决方案
您需要指定 SVG 的哪些元素接受指针事件。例如添加pointer-events="none"
到顶级SVG和pointer-events="visiblePainted"
路径元素,或者在您的情况下,由于中心空白空间是空的,您可以将 a 添加circle
到您的 svg 元素并将其应用pointer-events="visiblePainted"
到它。
<svg class="playa thePlay" width="64" height="64" viewBox="0 0 64 64" pointer-events="none">
<g id="play">
<title>Play</title>
<circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</g>
</svg>
为确保将pointer-events="none"
其传递给您的所有 svg 元素,您可以通过 css 应用它。
svg.thePlay {
pointer-events: none;
}
const manageCover = (function makeManageCover() {
const config = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function hideAll(elements) {
elements.forEach(hide);
}
function showCovers(playButton) {
const cover = playButton.parentElement;
cover.classList.add("active");
show(cover);
}
function coverClickHandler(evt) {
hideAll(config.containers);
const cover = evt.currentTarget;
showCovers(cover);
document.querySelector('.outer').classList.add('isOpen');
}
function addClickToButtons(playButtons) {
playButtons.forEach(function addEventHandler(playButton) {
playButton.addEventListener("click", coverClickHandler);
});
}
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}
function init(selectors) {
config.containers = document.querySelectorAll(selectors.container);
const playButtons = document.querySelectorAll(selectors.playButton);
addClickToButtons(playButtons);
}
return {
addCoverHandler,
init,
show
};
}());
const videoPlayer = (function makeVideoPlayer() {
const players = [];
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
}
function addPlayer(video, settings, videoIds = video.dataset.id) {
const videoId = !Array.isArray(videoIds) && videoIds;
const playlist = Array.isArray(videoIds) && videoIds;
const config = {
host: "https://www.youtube-nocookie.com",
videoId
};
config.playerVars = {
playlist: playlist || undefined
};
config.events = {
"onReady": onPlayerReady
};
const defaultOptions = config;
const playerOptions = Object.assign({}, defaultOptions, settings);
players.push(new YT.Player(video, playerOptions));
}
return {
addPlayer
};
}());
const managePlayer = (function makeManagePlayer() {
const config = {
height: 600,
width: 360
};
config.playerVars = {
autoplay: 0,
controls: 1,
disablekb: 1,
enablejsapi: 1,
fs: 0,
iv_load_policy: 3,
rel: 0
};
function show(el) {
el.classList.remove("hide");
}
function createPlayerOptions(settings) {
function paramInOptions(opts, param) {
if (settings[param] !== undefined) {
opts[param] = settings[param];
delete settings[param];
}
return opts;
}
const optionParams = ["width", "height", "playlist", "host", "videoid"];
const defaultOptions = config;
const preferred = optionParams.reduce(paramInOptions, {});
const playerOptions = Object.assign({}, defaultOptions, preferred);
// settings should now only consist of playerVars
const defaultVars = config.playerVars;
const playerVars = settings.playerVars;
config.playerVars = Object.assign({}, defaultVars, playerVars);
return playerOptions;
}
function createPlayer(videoWrapper, settings = {}, videoIds = "") {
const video = videoWrapper.querySelector(".video");
if (!videoIds) {
videoIds = video.dataset.id;
}
const playerOptions = createPlayerOptions(settings);
return videoPlayer.addPlayer(video, playerOptions, videoIds);
}
function createCoverClickHandler(playerSettings, videoIds) {
return function coverClickHandler(evt) {
const cover = evt.currentTarget;
const wrapper = cover.nextElementSibling;
show(wrapper);
const player = createPlayer(wrapper, playerSettings, videoIds);
wrapper.player = player;
};
}
function addPlayer(coverSelector, playerSettings, videoIds) {
const clickHandler = createCoverClickHandler(playerSettings, videoIds);
manageCover.addCoverHandler(coverSelector, clickHandler);
}
function addPlayerRandomVideo(coverSelector, playerSettings, videoIds) {
const index = Math.floor(Math.random() * videoIds.length);
const videoId = videoIds[index];
const clickHandler = createCoverClickHandler(playerSettings, videoId);
manageCover.addCoverHandler(coverSelector, clickHandler);
}
function init(playerOptions) {
Object.assign(config, playerOptions);
}
return {
add: addPlayer,
addRandom: addPlayerRandomVideo,
init
};
}());
function onYouTubeIframeAPIReady() {
managePlayer.init({
playerVars: {
autoplay: 0
}
});
managePlayer.addRandom(".playa", {
height: 207,
start: 45,
width: 277
}, [
"0dgNc5S8cLI",
"mnfmQe8Mv1g",
"-Xgi_way56U",
"CHahce95B1g"
]);
managePlayer.add(".playb", {
height: 207,
width: 277
});
managePlayer.addRandom(".playc", {
height: 207,
width: 277
}, [
"0dgNc5S8cLI",
"-Xgi_way56U",
"CHahce95B1g"
]);
managePlayer.add(".playd", {
height: 207,
width: 277
});
managePlayer.add(".playe", {
height: 207,
width: 277
});
managePlayer.add(".playf", {
height: 207,
width: 277
});
managePlayer.add(".playg", {
height: 207,
width: 277
});
managePlayer.add(".playh", {
height: 207,
width: 277
});
managePlayer.add(".playi", {
height: 207,
width: 277
});
manageCover.init({
container: ".container",
playButton: ".thePlay"
});
}
html,body { height: 100%; margin: 0; padding: 0;}body { background: white; animation: fade 2s ease 0s forwards;}@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; }}.outer { display: flex; flex-wrap: wrap; min-height: 100%; width: 310px; box-sizing: border-box; justify-content: center; align-content: center; margin: auto; gap: 20px; /*list-style:none;*/ padding: 0;}.outer.isOpen { display: flex; width: auto; align-content: stretch;}.container { display: flex; justify-content: center;}.container.active { flex: 1 0 0; animation: fadebody 5s ease 0s forwards; background-size: 165px 165px; background-image: linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, teal 5px, #0000 5px), linear-gradient(black 10px, #0000 10px 160px, black 160px), linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px), linear-gradient(orange 15px, #0000 15px 155px, orange 155px), linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px), linear-gradient(black 20px, #0000 20px 150px, black 150px), linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px), linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px), linear-gradient(black 30px, #0000 30px 140px, black 140px), linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px), linear-gradient(orange 35px, #0000 35px 135px, orange 135px), linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px), linear-gradient(black 40px, #0000 40px 130px, black 130px), linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px), linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px), linear-gradient(black 50px, #0000 50px 120px, black 120px), linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px), linear-gradient(orange 55px, #0000 55px 115px, orange 115px), linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px), linear-gradient(black 60px, #0000 60px 110px, black 110px), linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px), linear-gradient(teal 65px, #0000 65px 105px, teal 105px), linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px), linear-gradient(black 70px, #0000 70px 100px, black 100px), linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px), linear-gradient(orange 75px, #0000 75px 95px, orange 95px), linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px), linear-gradient(black 80px, #0000 80px 90px, black 90px), linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px), linear-gradient(teal, teal);}.thePlay{ /*margin: auto 20px;*/ width: 90px; height: 90px; border-radius: 50%; cursor: pointer; flex-shrink: 0; fill: blue;}/* when container is active hide the svg */.container.active .thePlay { display: none;}.inner-container { display: none;}/* when container is active hide the svg and show the inner container*/.container.active .thePlay { display: none;}.container.active .inner-container { display: flex;}.container.active .inner-container.curtain { display: block;}@keyframes fadebody { 0% { opacity: 0; } 100% { opacity: 1; }}.curtain { position: relative; max-width: 640px; margin: auto; flex: 1 0 0%;}.panel-left,.panel-right { position: absolute; height: 100%; width: calc(50% + 1px); /* rounding error fix */ top: 0%; transition: all ease 10s; /*background-image: url("https://picsum.photos/600"); background-size: cover; background-repeat: no-repeat; background-position: center;*/ overflow: hidden;}.panel-left { left: 0; /*background-color: rgb(91, 96, 106);*/}.panel-right { right: 0; /*background-color: rgb(229, 211, 211);*/}.panel-left::before,.panel-right::before { content: ""; position: absolute; height: 100%; width: 200%; top: 0; left: 0; background-image: url("https://picsum.photos/id/26/1920/1080"); background-size: auto; background-repeat: no-repeat; background-position: 0 0;}.curtain2 .panel-left::before,.curtain2 .panel-right::before { background-image: url("https://picsum.photos/id/27/1920/1080");}.curtain3 .panel-left::before,.curtain3 .panel-right::before { background-image: url("https://picsum.photos/id/27/1920/1080");}.panel-right::before { left: -100%;}.container.active .curtain .panel-left { animation: curtain1 8s forwards; animation-delay: 1s;}@keyframes curtain1 { to { transform: translateX(-100%); }}.container.active .curtain .panel-right { animation: curtain2 8s forwards; animation-delay: 1s;}@keyframes curtain2 { to { transform: translateX(100%); }}@keyframes curtain3 { to { transform: translateX(100%); }}@keyframes curtain4 { to { transform: translateX(100%); }}@keyframes curtain5 { to { transform: translateX(100%); }}@keyframes curtain6 { to { transform: translateX(100%); }}@keyframes curtain7 { to { transform: translateX(100%); }}@keyframes curtain8 { to { transform: translateX(100%); }}@keyframes curtain9 { to { transform: translateX(100%); }}.ratio-keeper { position: relative; height: 0; padding-top: 56.25%; border-radius: 25px; margin: auto; overflow: hidden;}.video-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}.hide { display: none;}
svg.thePlay {
pointer-events: none;
}
<ul class="outer">
<li class="container">
<svg class="playa thePlay" width="64" height="64" viewBox="0 0 64 64" pointer-events="none">
<g id="play">
<title>Play</title>
<circle cx="32" cy="32" r="26" fill="white" pointer-events="visiblePainted" />
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z"
pointer-events="visiblePainted" />
</g>
</svg>
<div class="inner-container curtain curtain1">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playb thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain2">
<div class="ratio-keeper">
<div class="wrapb">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container with-curtain">
<svg class="playc thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain3">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playd thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain4">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playe thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain5">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playf thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain6">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playg thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain7">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playh thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain8">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
<li class="container">
<svg class="playi thePlay" width="64" height="64" viewBox="0 0 64 64">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain9">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</li>
</ul>
推荐阅读
- excel - 将动态文本插入形状vba
- command-line-interface - CloudFoundry CLI - 获取绑定凭证
- python-3.x - SyntaxError:文件 charset_normalizer/__init__.py 中的非 ASCII 字符 '\xd1' 它自己
- html - 有没有更好的方法来做到这一点?
- python-3.x - 试图从串口获取数据以显示在 Tkinter 窗口中
- python - Cython 没有加速
- javascript - CYPRESS:检查按钮是否被禁用的功能
- facebook - Facebook 像素事件测试和 iOS 14.5
- css - 角度项目中未显示阴影
- pdf - pdf 标记和 pdf 注释术语有什么区别?