【素材】调试保存代码

阿强

古來稀 发表于 2022-10-9 10:06
阿强老师上午好！非常感谢您的回复与支持！

               古来稀版主新周愉快。  

古來稀

古來稀

<DIV style="LEFT: -232px; WIDTH: 1000px; POSITION: relative; TOP: -100px">
<style>
        #papa {
        margin: auto;
        width: 1000px;
        height: 600px;
        background: rgba(0,0,0,.45) no-repeat center/cover;
        margin-top: 20px;
        margin-left: 30px;
        box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;
        display: grid;
        place-items: center;
        overflow: hidden;
        position: relative;
        z-index: 1;
}
#mpic {
        position: absolute;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1000px;
        height: 600px;
        animation: rote 1s linear infinite;
        cursor: pointer;
        opacity: 1;
}
@keyframes rote {
        0%{
        background-position: 0% 0%;
    }
    100%{opacity: 0;
        background-position: 0% 1600%;filter:hue-rotate(360deg)
    }
}
#mpic1 {
        position: absolute;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1000px;
        height: 600px;
        animation: rotet 3s linear infinite;
        cursor: pointer;
        opacity: 1;
}
@keyframes mov1 {
        from {
                width: 0%;
        }
        to {
                width: 100%;
        }
}
@keyframes mov2 {
        from {
                width: 0%;
        }
        to {
                width: 100%;
        }
}
#photo img {
        width: 1000px;
        height: 600px;
        position: absolute;
        border: 1px solid #000000;
        top: 0px;
        left: 0px;
        filter: contrast(140%)brightness(100%);
        opacity: 0;
        animation-name: round;
        animation-duration: 32s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
}
@keyframes round {
        0% {
                opacity: 1;
                clip-path: polygon(0 0, 0 100%, 100% 100%, 0% 100%);
                -webkit-transform: translate(0%,0%)scale(1);
        }
        6% {
                opacity: 1;
                clip-path: polygon(0 0, 0 100%, 100% 100%, 0 0);
                -webkit-transform: translate(0%,0%)scale(1);
        }
        10% {
                opacity: 1;
                clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
                -webkit-transform: translate(0%,0%)scale(1);
        }
        16% {
                opacity: 1;
                clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
                -webkit-transform: translate(0%,0%)scale(1);
        }
        20% {
                opacity: 0;
                clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
                -webkit-transform: translate(0%,0%)scale(1);
        }
}
#photo img:nth-child(8) {
        animation-delay: 28s;
}
#photo img:nth-child(7) {
        animation-delay: 24s;
}
#photo img:nth-child(6) {
        animation-delay: 20s;
}
#photo img:nth-child(5) {
        animation-delay: 16s;
}
#photo img:nth-child(4) {
        animation-delay: 12s;
}
#photo img:nth-child(3) {
        animation-delay: 8s;
}
#photo img:nth-child(2) {
        animation-delay: 4s;
}
#photo img:nth-child(1) {
        animation-delay: 0s;
}
.stop #photo img:nth-child(1) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(2) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(3) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(4) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(5) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(6) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(7) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(8) {
        animation-play-state: paused;
}
</style>
<div id="papa" data-lr="no"><div id="testImg">
<div id="items"><div id="photo"><img
src="https://pic1.imgdb.cn/item/6343f1d416f2c2beb1260ee8.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1d416f2c2beb1260ef1.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1d416f2c2beb1260f19.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1d416f2c2beb1260f34.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1d416f2c2beb1260efe.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1f516f2c2beb1265829.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1f516f2c2beb1265829.jpg"><img
src="https://pic1.imgdb.cn/item/6343f1f516f2c2beb1265836.jpg"></div>
</td></tr><br><br><br><br><br><br><br><br></div>

沪上人

欣赏学习！谢谢介绍！

古來稀

沪上人 发表于 2022-10-10 20:24
欣赏学习！谢谢介绍！

沪上人老师晚上好！非常感谢您的回复与支持！

古來稀

古來稀

<DIV style="LEFT: -232px; WIDTH: 1000px; POSITION: relative; TOP: -100px">
<style type="text/css">
        #outblk        {margin: auto;
        width: 1000px;
        height: 600px;
        margin-top: 20px;
        margin-left: 30px;
        box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;
        display: grid;
        place-items: center;
        overflow: hidden;
        position: relative;
        z-index: 1;
        }
#photo {
        width: 1000px;
        height: 600px;
        position: absolute;
        border: 0px solid #000000;
        top: 0px;
        left: 0px;
        background:#800000 linear-gradient(45deg, #0411FA 29%,#8B43C9 79%);}
#photo img {
        width: 1000px;
        height: 600px;
        position: absolute;
        border: 0px solid #000000;
        top: 0px;
        left: 0px;
        filter: contrast(120%)brightness(110%);
        opacity: 0;
        animation-name: round;
        animation-duration: 48s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
}


@keyframes round  {0% {
opacity: 0;
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;background-position: 0% 0%;
}
12% {
opacity: 1;background-position: 0% 0%;
}
18% {
opacity: 0;background-position: 0% 0%;
-webkit-transform:translate(0%,0%)scale(1);}
}
#photo img:nth-child(8) {
        animation-delay: 42s;
}
#photo img:nth-child(7) {
        animation-delay: 36s;
}
#photo img:nth-child(6) {
        animation-delay: 30s;
}
#photo img:nth-child(5) {
        animation-delay: 24s;
}
#photo img:nth-child(4) {
        animation-delay: 18s;
}
#photo img:nth-child(3) {
        animation-delay: 12s;
}
#photo img:nth-child(2) {
        animation-delay: 6s;
}
#photo img:nth-child(1) {
        animation-delay: 0s;
}
.stop #photo img:nth-child(1) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(2) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(3) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(4) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(5) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(6) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(7) {
        animation-play-state: paused;
}
.stop #photo img:nth-child(8) {
        animation-play-state: paused;
}
        }
</style>
<div id="outblk"><div id="testImg">
<div  id="photo"><img src="https://pic1.imgdb.cn/item/6345426316f2c2beb15b924b.jpg" /> <img src="https://pic1.imgdb.cn/item/6345426316f2c2beb15b9256.jpg" /> <img
src="https://pic1.imgdb.cn/item/6345426316f2c2beb15b9261.jpg" /> <img
src="https://pic1.imgdb.cn/item/6345426316f2c2beb15b926f.jpg" /> <img
src="https://pic1.imgdb.cn/item/6345428316f2c2beb15bc2b9.jpg" /> <img
src="https://pic1.imgdb.cn/item/6345428316f2c2beb15bc2c1.jpg" /> <img
src="https://pic1.imgdb.cn/item/6345428316f2c2beb15bc2ce.jpg" /><img
src="https://pic1.imgdb.cn/item/6345428316f2c2beb15bc2f0.jpg" /> </div></div>
</div>
</script>
</td></tr><br><br><br><br><br><br><br><br></tr><br><br><br><br><br><br><br><br></div>
<video src="https://link.hhtjim.com/kw/37345457.mp3" width="4" height="2" controls="" autoplay=""><ideo></ideo></video>

古來稀

東方騰飛的中國龍 编制：古來稀          素材：网络                                                                                                                                                           00:00 | 00:00

古來稀

歡 天 喜 地 鬧 元 宵 编制：莲花          素材：网络