若来生再相遇 TO；圊圊淥詶
本帖最后由 花茶（永） 于 2025-9-16 16:20 编辑 <br /><br /><!DOCTYPE html><html lang="en">
<head>
<title>全屏图片轮播效果</title>
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face{font-family:FontStyle;src:url(".");font-display:fallback;}
@font-face {font-family: "shishang";src: url(".");font-display:fallback;}
*{padding:0;margin:0;box-sizing:border-box;
}html{font-size:10px;}body{background-color:#000;
}.slideshow{width:100%;height:100vh;
position:relative;overflow:hidden;
}.slideshow-item{width:inherit;
height:inherit;position:absolute;
opacity:0;
animation:slideanim 62s infinite;
}
.slideshow-item:nth-child(1),
.slideshow-item:nth-child(1) img{animation-delay:0;
}
.slideshow-item:nth-child(2),
.slideshow-item:nth-child(2) img{animation-delay:20s;
}.slideshow-item:nth-child(3),
.slideshow-item:nth-child(3) img{animation-delay:40s;
}.slideshow-item img{width:100%;
height:100%;object-fit:cover;
animation:zoom 62s infinite;
}
.slideshow-item-text{max-width:50%;
position:absolute;
top:50%;
transform:translateY(-50%);
left:0;
background-color:rgba(0,0,0,0.8);
color:#fff;
padding:10rem 5rem;
font-family:'Raleway',sans-serif;
}
.slideshow-item-text h5{font-size:3.5rem;
letter-spacing:3px;
font-family:shishang,'微软雅黑';
}.slideshow-item-text p{font-weight:300;
font-size:1.6rem;
margin-top:2rem;
font-family:FontStyle,'微软雅黑';
}@keyframes slideanim{25%{opacity:1;
}
40%{opacity:0;
}}
@keyframes zoom{100%{transform:scale(1);
}}
@media screen and (max-width:1100px){.slideshow-item-text{max-width:75%;
}}
@media screen and (max-width:768px){.slideshow-item-text{padding:3rem 1.5rem;
}}
@media screen and (max-width:456px){.slideshow-item-text{max-width:100%;
top:inherit;
transform:translateY(0);
bottom:0;}.slideshow-item-text h5{font-size:2rem;
}.slideshow-item-text p{font-size:1rem;
}}
/* 视频相关样式 */
.mypic {
position: absolute;
right: 1060px;
top: 100px;
cursor: pointer;
mix-blend-mode: Multiply;
z-index: 3;
}
#vid3 {
position: absolute;
width: 100%;
height: 110%;
right: 0%;
top: -280px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: 0.00;
}
#vid4 {
position: absolute;
width: 100%;
height: 66%;
top: 400px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: 0.04;
}
#vid5 {
position: absolute;
width: 100%;
height: 110%;
top: -80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: 0.12;
}
</style>
</head>
<body>
<div class="slideshow-item">
<img src="http://www.yhyhlt.com/data/attachment/forum/202509/16/161342i0sipvvcmllsvqiv.jpg" alt="First Image Silde Picture">
</div>
<div class="slideshow-item">
<img src="http://www.yhyhlt.com/data/attachment/forum/202509/16/161415cmhtbqthx1so3tht.jpg" alt="First Image Silde Picture">
</div>
<div class="slideshow-item">
<img src="http://www.yhyhlt.com/data/attachment/forum/202509/16/161342i0sipvvcmllsvqiv.jpg" alt="First Image Silde Picture">
</div>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=10 height=6 src="//music.163.com/outchain/player?type=2&id=2730252468&auto=1&height=66"></iframe>
</div>
</body>
</html> 本帖最后由 花茶（永） 于 2025-9-16 17:16 编辑
本帖最后由 花茶（永） 于 2025-9-16 19:46 编辑 <br /><br />1 本帖最后由 花茶（永） 于 2025-9-18 13:22 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动切换效果的幻灯片</title>
<style>
#mydiv {
margin: 150px 0 30px calc(42% - 800px);
display: grid;
place-items: center;
width: 1600px;
height: 900px;
background-color: #6088d8;
/* box-shadow: 3px 3px 20px #000;*/
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
/* 滚动文字样式 */
.scrolling-text {
position: absolute;
top: 20px;
right: -100%;
white-space: nowrap;
color: blue;
font-size: 0px;
font-weight: bold;
z-index: 200;
animation: scrollText 30s linear infinite;
}
@keyframes scrollText {
0% {
transform: translateX(0);
right: -100%;
}
100% {
transform: translateX(-100%);
right: 100%;
} <!-- 图片幻灯片 -->
<div class="slide" style="opacity: 1;">
<img src="http://www.yhyhlt.com/data/attachment/forum/202509/16/161342i0sipvvcmllsvqiv.jpg" alt="图片1">
</div>
<div class="slide">
<img src="http://www.yhyhlt.com/data/attachment/forum/202509/16/171518ichzvsyln5npsdvv.jpg" alt="图片2">
</div>
<div class="slide">
<img src="http://www.yhyhlt.com/data/attachment/forum/202509/16/161342i0sipvvcmllsvqiv.jpg" alt="图片3">
</div>
<div class="slide">
<img src="http://www.yhyhlt.com/data/attachment/forum/202509/16/171518ichzvsyln5npsdvv.jpg" alt="图片4">