【漫步特效】梦幻诛仙
<style>#mydiv {
margin: 130px 0 30px calc(50% - 900px);
display: grid;
place-items: center;
width: 1700px;
height: 850px;
background: lightblue url('https://644220.freep.cn/644220/4/301.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
#vid {
position: absolute;
width: 130%;
height: 130%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
mask: linear-gradient(to top right, red 88%, transparent 0);
-webkit-mask: linear-gradient(to top right, red 88%, transparent 0);
z-index: 6;
opacity: .40;
}
#mydiv .img-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
#mydiv .img-slider img {
position: absolute;
top: 0;
left: 0;
width: 1700px;
height: 850px;
object-fit: cover;
opacity: 0;
animation: imgSlider 60s linear infinite;
}
@keyframes imgSlider {
0% { opacity: 1; transform: scale(1); z-index: 5; }
5% { opacity: 0; transform: scale(1.1); z-index: 2; }
10% { opacity: 1; transform: translateX(0); z-index: 5; }
15% { opacity: 0; transform: translateX(-100%); z-index: 2; }
20% { opacity: 1; transform: translateX(0); z-index: 5; }
25% { opacity: 0; transform: translateX(100%); z-index: 2; }
30% { opacity: 1; transform: translateY(0); z-index: 5; }
35% { opacity: 0; transform: translateY(-100%); z-index: 2; }
40% { opacity: 1; transform: translateY(0); z-index: 5; }
45% { opacity: 0; transform: translateY(100%); z-index: 2; }
50% { opacity: 1; transform: rotate(0deg) scale(1); z-index: 5; }
55% { opacity: 0; transform: rotate(10deg) scale(0.9); z-index: 2; }
60% { opacity: 1; filter: blur(0); z-index: 5; }
65% { opacity: 0; filter: blur(10px); z-index: 2; }
70% { opacity: 1; filter: brightness(1); z-index: 5; }
75% { opacity: 0; filter: brightness(0); z-index: 2; }
80% { opacity: 1; transform: rotateY(0deg); z-index: 5; }
85% { opacity: 0; transform: rotateY(180deg); z-index: 2; }
90% { opacity: 1; clip-path: inset(0 0 0 0); z-index: 5; }
95% { opacity: 0; clip-path: inset(50% 0 50% 0); z-index: 2; }
100% { opacity: 1; transform: scale(1); z-index: 5; }
}
#mydiv .img-slider img:nth-child(1) { animation-delay: 0s; }
#mydiv .img-slider img:nth-child(2) { animation-delay: 30s; }
#mydiv .img-slider img:nth-child(3) { animation-delay: 60s; }
#mydiv .img-slider img:nth-child(4) { animation-delay: 90s; }
#mydiv .img-slider img:nth-child(5) { animation-delay: 120s; }
#top-png {
position: absolute;
top: 0;
left: 0;
width: 1700px;
height: 850px;
object-fit: cover;
z-index: 999;
pointer-events: none;
}
</style>
<div id="mydiv">
<img id="top-png" src="https://644220.freep.cn/644220/4/398.png">
<audio id="aud" src="https://mp3.joy127.com/music/12898.mp3" autoplay loop></audio>
<video id="vid" src="https://img2.tukuppt.com/video_show/3664703/00/01/99/5b4eba60cc57c.mp4" autoplay="" loop="" muted=""></video>
<div class="img-slider">
<img src="https://644220.freep.cn/644220/4/301.jpg">
<img src="https://644220.freep.cn/644220/4/302.jpg">
<img src="https://644220.freep.cn/644220/4/303.jpg">
<img src="https://644220.freep.cn/644220/4/304.jpg">
<img src="https://644220.freep.cn/644220/4/305.jpg">
</div>
</div>
漂亮~谢谢友友精彩分享
页:
[1]