可爱老人网

 找回密码
 注册会员
搜索
123
返回列表 发新帖
楼主: 古來稀

【素材】调试保存代码

[复制链接]
发表于 2022-10-10 09:34 | 显示全部楼层
古來稀 发表于 2022-10-9 10:06
阿强老师上午好!非常感谢您的回复与支持!

               古来稀版主新周愉快。  
 楼主| 发表于 2022-10-10 18:33 | 显示全部楼层








本帖最后由 古來稀 于 2022-10-10 18:46 编辑

 楼主| 发表于 2022-10-10 18:36 | 显示全部楼层
本帖最后由 古來稀 于 2022-10-10 18:39 编辑

<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 | 显示全部楼层
欣赏学习!谢谢介绍!
 楼主| 发表于 2022-10-10 22:42 | 显示全部楼层
沪上人 发表于 2022-10-10 20:24
欣赏学习!谢谢介绍!

沪上人老师晚上好!非常感谢您的回复与支持!
 楼主| 发表于 2022-10-11 18:48 | 显示全部楼层
















 楼主| 发表于 2022-10-11 18:50 | 显示全部楼层
<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>

 楼主| 发表于 2022-10-14 16:21 | 显示全部楼层
本帖最后由 古來稀 于 2023-1-31 15:43 编辑





東方騰飛的中國龍

编制:古來稀          素材:网络

 

                                        

                                        

                                  

02.jpg

                                  

03.jpg

00:00 | 00:00

                                         

06.gif

 










本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册会员

x
 楼主| 发表于 2022-10-18 21:39 | 显示全部楼层
本帖最后由 古來稀 于 2023-1-31 20:03 编辑









歡 天 喜 地 鬧 元 宵


编制:莲花          素材:网络


                                        

02.jpg

03.jpg

                                         

06.gif

 









下一页 发布主题 快速回复

手机版|公众号|小黑屋|可爱老人网

GMT+8, 2024-11-10 07:15

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表