原问题:"@Temani如果帮助我把悬停效果在我的代码，我试图使悬停效果，所以当任何图像有鼠标悬停，衬衫缩小和艺术放大。现在我正试图在我的实际网站上使用他的代码，这将有几个页面，但由于某种原因它不工作，或者最好说我不知道如何才能使它工作。">
再次感谢@Temani Afif，在他的指导下，我找到了答案，现在我有两个问题和一个请求:我无法在衬衫上把商标居中。另外，当浏览器窗口完全放大时，衬衫会放大到原来的尺寸，不会超过100%。我如何简化代码?
我很感激你的帮助。
const images = document.querySelectorAll('.anim ');
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.intersectionRatio > 0) {
entry.target.style.animation = `square-animation .5s ${entry.target.dataset.delay} forwards ease-out`;
}
else {
entry.target.style.animation = 'none';
}
})
})
images.forEach(entry => {
observer.observe(entry)
})
const slideup = document.querySelectorAll('.slideup ');
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.intersectionRatio > 0) {
entry.target.style.animation = `slideup 1s ${entry.target.dataset.delay} forwards ease-out`;
}
else {
entry.target.style.animation = 'none';
}
})
})
slideup.forEach(entry => {
observer.observe(entry)
})
const scale = document.querySelectorAll('.scale ');
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.intersectionRatio > 0) {
entry.target.style.animation = `scale 1s ${entry.target.dataset.delay} forwards ease-out`;
}
else {
entry.target.style.animation = 'none';
}
})
})
scale.forEach(entry => {
observer.observe(entry)
})
const sliding = document.querySelectorAll('.sliding ');
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.intersectionRatio > 0) {
entry.target.style.animation = `sliding .5s ${entry.target.dataset.delay} forwards ease-out`;
}
else {
entry.target.style.animation = 'none';
}
})
})
sliding.forEach(entry => {
observer.observe(entry)
}).section {
height: 100%;
width: 100%;
display: block;
}
.section.one{
background-color: rgb(6, 65, 65);
}
.title-bar {
display: flex;
overflow: visible;
width: 100vw;
height: 8vh;
max-width: 70vw;
min-height: 1vh;
margin-top: 5vh;
margin-bottom: 5vh;
margin-right: auto;
margin-left: auto;
justify-content: center;
align-items: center;
border-top-style: solid;
border-top-width: 1vh;
border-top-color: #28f7e6;
border-bottom-style: solid;
border-bottom-width: 1vh;
border-bottom-color: #28f7e6;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
}
.title-text {
text-align: center;
font-size: 6vh;
margin: 0px 0px;
font-family: PT Serif;
color: #28f7e6;
}
.grid-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-column-gap: 1%;
max-width:70%;
margin:auto;
}
.grid-container > div {
display: grid;
place-items: center;
}
.grid-container > div > .shirt {
grid-area: 1/1;
transition: .5s;
}
.grid-container > div > .art {
grid-area: 1/1;
transition: .5s;
transform-origin:bottom;
}
.grid-container > div > .shirt > .slideup {
max-width: 100%;
/* controls the width of the shirt images */
}
.grid-container > div > .art > .scale {
max-width: 50%;
/* controls the width of the art images */
}
.grid-container div:hover .shirt {
transform: scale(0);
}
.grid-container div:hover .art {
transform: scale(2);
transform-origin: bottom;
}
.anim {
opacity: 0;
}
.slideup {
opacity: 0;
}
.scale {
opacity: 0;
transform-origin: bottom left;
}
.sliding {
opacity: 0;
}
@keyframes square-animation {
0%{
transform: scale(0, 1);
opacity: 0;
}
100%{
transform: scale(1, 1);
opacity: 1;
}
}
@keyframes slideup {
0%{
transform: translate(0px,50%);
opacity: 0;
}
100%{
transform: translate(0px,0px);
opacity: 1;
}
}
@keyframes scale {
0%{
transform-origin: bottom left;
transform: scale(0,0);
opacity: 0;
}
100%{
transform-origin: bottom left;
transform: scale(1,1);
opacity: 1;
}
}
@keyframes rotate {
0%{
transform: rotate(90deg);
opacity: 0;
}
100%{
transform: rotate(0deg);
opacity: 1;
}
}
@keyframes sliding {
0%{
transform: translate(50px,10px);
opacity: 0;
}
100%{
transform: translate(0px,0px);
opacity: 1;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HOME</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.css"
integrity="sha512-NGRhMiWY9pf5z8PLens7/u+LLwIPAu1dhJ7u9sHRWIo8TKrVbKiWlRdYRH3pVDCZA10zmobo+PBLGeLOREklBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="fullpage">
<div class="section one">
<div class="grid-title-container">
<div class="title-bar anim" data-delay=".1s">
<p class="title-text"> First Banner </p>
</div>
<div class="grid-container ">
<div>
<div class="shirt">
<img src="https://i.imgur.com/oS8QWPI.png" class="slideup" data-delay=".4s">
</div>
<div class="art">
<img src="https://i.imgur.com/jeNzULX.png" class="scale" data-delay="1s">
</div>
</div>
<div>
<div class="shirt">
<img src="https://i.imgur.com/oS8QWPI.png" class="slideup" data-delay=".6s">
</div>
<div class="art">
<img src="https://i.imgur.com/jeNzULX.png" class="scale" data-delay="1.2s">
</div>
</div>
<div>
<div class="shirt">
<img src="https://i.imgur.com/oS8QWPI.png" class="slideup" data-delay=".8s">
</div>
<div class="art">
<img src="https://i.imgur.com/jeNzULX.png" class="scale" data-delay="1.4s">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js"
integrity="sha512-ojnoeSkK5NDwnuW5S0ZnddobHez8Bx1yVa3RE+Cd0fGEuY/NEd4sgVF/CJ6eDtnOeLZLbTJpNFrCkUYbHS2hRA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>"
<script src="script.js"></script>
<script>
new fullpage('#fullpage', {
//options here
autoScrolling: true,
scrollHorizontally: true
});
</script>
</body>
</html>因为wordpress是非常可定制的，你可以设计一个有很多视觉吸引力的网站。创建一个独特的网站可能需要时间和计划，但如果你使用正确的技术，这是非常可能的