《痴情的我犯下痴情的错》赵洋 DJ（四宫格）

焱鑫磊 发表于 2023-5-17 09:57

本帖最后由焱鑫磊于 2023-5-20 21:49 编辑 <br /><br /><style type="text/css">.pa{
margin: 0px auto;z-index: 1;
width: 1164px;
height: 640px;
overflow: hidden;
position: relative;
}
.square
{top: 0px;
left: 0px;
position: absolute;border-radius:0%;
width: 1164px;box-shadow: 0px 0px 0px 6px #ffffff;
height: 640px;}

.square:nth-child(1) {animation:change1 20s ease infinite;}

.square:nth-child(2) {animation:change2 20s ease infinite;}

.square:nth-child(3) {animation:change3 20s ease infinite;}

.square:nth-child(4) {animation:change4 20s ease infinite;}

@keyframes change1
{ 0% {transform: scale(.4, .4)rotateZ(0deg)translate(0%,0%);}
10% {transform: scale(.4, .4)rotateZ(0deg)translate(60%,60%);}
20% {transform: scale(.4, .4)rotateZ(40deg)translate(-60%,60%);}

25%{background:#00FF00;transform: rotateX(180deg)scale(.4)translate(52%,52%); }
30% {background:#FF0000;transform: scale(.4)translate(-52%,52%)rotateX(45deg)rotateY(20deg) ; }
35% {background:#550000;transform: scale(.4)translate(-52%,-52%)rotateZ(0deg)rotateY(20deg); }

40% {transform: scale(.4, .4)rotateX(0deg)rotateZ(0deg)translate(-60%,60%);}
50% {transform: scale(.4, .4)rotateX(0deg)translate(60%,-60%);}
60% {transform: scale(.4, .4)perspective(800px)rotateX(-20deg)translate(60%,-60%);}
70% {transform: scale(.4, .4)perspective(800px)rotateX(20deg)translate(60%,-60%);}
75% {transform: scale(.4, .4)perspective(800px)rotateX(0deg)translate(60%,-60%);}
80% {transform: scale(.4,.4)perspective(800px)rotateY(-20deg)translate(60%,-60%);}
90% {transform: scale(.4,.4)perspective(800px)rotateY(20deg)translate(60%,-60%);}
100% {transform: scale(.4,.4)perspective(800px)rotateY(0deg)translate(60%,-60%);}
}
@keyframes change2
{ 0% {transform: scale(.4, .4)rotateZ(0deg)translate(0%,0%);}
10% {transform: scale(.4, .4)rotateZ(0deg)translate(-60%,60%);}
20% {transform: scale(.4, .4)rotateZ(-40deg)translate(60%,60%);}

25% {background:#00FF00;transform: rotateX(-180deg)scale(.4)translate(-52%,-52%); }
30% {background:#FF0000;transform: scale(.4)translate(52%,-52%)rotateX(45deg)rotateY(20deg) ; }
35% {background:#550000;transform: scale(.4)translate(52%,52%)rotateZ(0deg)rotateY(20deg); }
40% {transform: scale(.4, .4)rotatex(0deg)rotateZ(0deg)translate(60%,60%);}
50% {transform: scale(.4, .4)rotateX(0deg)translate(-60%,-60%);}
60% {transform: scale(.4,.4)perspective(800px)rotateX(-20deg)translate(-60%,-60%);}
70% {transform: scale(.4,.4)perspective(800px)rotateX(20deg)translate(-60%,-60%);}
75% {transform: scale(.4,.4)perspective(800px)rotateX(0deg)translate(-60%,-60%);}
80% {transform: scale(.4,.4)perspective(800px)rotateY(20deg)translate(-60%,-60%);}
90% {transform: scale(.4,.4)perspective(800px)rotateY(-20deg)translate(-60%,-60%);}
100%{transform: scale(.4,.4)perspective(800px)rotateY(0deg)translate(-60%,-60%);}
}

@keyframes change3
{0% {transform: scale(.4, .4)rotateZ(0deg)translate(0%,0%);}
10% {transform: scale(.4, .4)rotateZ(0deg)translate(60%,-60%);}
20% {transform: scale(.4, .4)rotateZ(-40deg)translate(-60%,-60%);}

25% {background:#00FF00;transform: rotateX(180deg)scale(.4)translate(52%,-52%); }
30% {background:#FF0000;transform: scale(.4)translate(52%,52%)rotateX(45deg)rotateY(20deg) ; }
35% {background:#550000;transform: scale(.4)translate(52%,-52%)rotateZ(180deg)rotateY(20deg); }
40% {transform: scale(.4, .4)rotatex(0deg)rotateZ(0deg)translate(-60%,-60%);}
50% {transform: scale(.4, .4)rotateX(0deg)translate(60%,60%);}
60% {transform: scale(.4, .4)perspective(800px)rotateX(20deg)translate(60%,60%);}
70% {transform: scale(.4, .4)perspective(800px)rotateX(-20deg)translate(60%,60%);}
75% {transform: scale(.4, .4)perspective(800px)rotateX(0deg)translate(60%,60%);}
80% {transform: scale(.4, .4)perspective(800px)rotateY(-20deg)translate(60%,60%);}
90% {transform: scale(.4, .4)perspective(800px)rotateY(20deg)translate(60%,60%);}
100%{transform: scale(.4, .4)perspective(800px)rotateY(0deg)translate(60%,60%);}
}

@keyframes change4
{ 0%{transform: scale(.4, .4)rotateZ(0deg)translate(0%,0%);}
10% {transform: scale(.4, .4)rotateZ(0deg)translate(-60%,-60%);}
20% {transform: scale(.4, .4)rotateZ(40deg)translate(60%,-60%);}

25% {background:#00FF00;transform: rotateX(-180deg)scale(.4)translate(-52%,52%); }
30% {background:#FF0000;transform: scale(.4)translate(-52%,-52%)rotateX(45deg)rotateY(20deg) ; }
35% {background:#550000;transform: scale(.4)translate(-52%,52%)rotatez(180deg)rotateY(20deg); }

40% {transform: scale(.4, .4)rotatex(0deg)rotateZ(0deg)translate(60%,-60%);}
50% {transform: scale(.4, .4)rotateX(0deg)translate(-60%,60%);}
60% {transform: scale(.4, .4)perspective(800px)rotateX(20deg)translate(-60%,60%);}
70% {transform: scale(.4, .4)perspective(800px)rotateX(-20deg)translate(-60%,60%);}
75% {transform: scale(.4, .4)perspective(800px)rotateX(0deg)translate(-60%,60%);}
80% {transform: scale(.4, .4)perspective(800px)rotateY(20deg)translate(-60%,60%);}
90% {transform: scale(.4,.4)perspective(800px)rotateY(-20deg)translate(-60%,60%);}
100%{transform: scale(.4,.4)perspective(800px)rotateY(0deg)translate(-60%,60%);}
}
</style>
<div style="width: 1164px; height: 640px; margin-top:110px; margin-left:-280px;overflow: hidden;position: absolute;background:url(https://pic2.imgdb.cn/item/646432c90d2dde577713eddd.jpg)0 0/100% 100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000);box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; text-align: center;">
<div style="width: 980;height: 500px;position: absolute;LEFT:30px;top:440px;transform: scale(1);z-index: 2;"><iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="https://pan.111t.net/view.php/71a1ebe68af8b4f61e4a297789846dff.html" width="980"></iframe></div>

<div class="pa">
<div class="square"><img src="https://pic2.imgdb.cn/item/646432fd0d2dde5777141c00.jpg" style="width: 100%; height: 100%;" /></div>

<div class="square"><img src="https://pic2.imgdb.cn/item/6464331f0d2dde5777143ee2.jpg" style="width: 100%; height: 100%;" /></div>

<div class="square"><img src="https://pic2.imgdb.cn/item/646433430d2dde5777145f2f.jpg" style="width: 100%; height: 100%;" /></div>

<div class="square"><img src="https://pic2.imgdb.cn/item/646433610d2dde577714837e.jpg" style="width: 100%; height: 100%;" /></div>
</div>
</div>

<div style="width: 980;height: 830px;"> </div>

红影发表于 2023-5-17 10:24

四张图片的轮转方式很特别。同步歌词的展示也很奇特。欣赏焱鑫磊好帖{:4_199:}

红影发表于 2023-5-17 10:25

这个帖子好像没找到暂停按钮啊{:4_173:}

梦缘发表于 2023-5-17 11:05

给力的DJ，欣赏老师的分享！{:4_178:}

樵歌发表于 2023-5-17 13:31

创造性制作！那美女不断移动有点乱花迷眼呵{:4_187:}

焱鑫磊 发表于 2023-5-17 20:26

红影发表于 2023-5-17 10:24
四张图片的轮转方式很特别。同步歌词的展示也很奇特。欣赏焱鑫磊好帖

问好红影！{:4_187:}

焱鑫磊 发表于 2023-5-17 20:28

红影发表于 2023-5-17 10:25
这个帖子好像没找到暂停按钮啊

红影好！没安装按钮。{:4_204:}

焱鑫磊 发表于 2023-5-17 20:28

梦缘发表于 2023-5-17 11:05
给力的DJ，欣赏老师的分享！

梦缘好！{:4_187:}

焱鑫磊 发表于 2023-5-17 20:29

樵歌发表于 2023-5-17 13:31
创造性制作！那美女不断移动有点乱花迷眼呵

问好樵歌！{:4_187:}

红影发表于 2023-5-17 20:32

焱鑫磊发表于 2023-5-17 20:28
红影好！没安装按钮。

哦，这会看到按钮了呢{:4_187:}

红影发表于 2023-5-17 20:32

焱鑫磊发表于 2023-5-17 20:26
问好红影！

问好焱鑫磊，晚上好{:4_187:}

焱鑫磊 发表于 2023-5-17 21:46

红影发表于 2023-5-17 20:32
哦，这会看到按钮了呢

红影：失误了，上传的图片必须是https://，按钮图片错了http://。

红影发表于 2023-5-17 21:54

焱鑫磊发表于 2023-5-17 21:46
红影：失误了，上传的图片必须是https://，按钮图片错了http://。

能看到啊，还不错的{:4_187:}

焱鑫磊 发表于 2023-5-17 22:02

红影发表于 2023-5-17 21:54
能看到啊，还不错的

谢谢红影鼓励！加“精华”。高兴！！！{:4_199:}

红影发表于 2023-5-17 22:31

焱鑫磊发表于 2023-5-17 22:02
谢谢红影鼓励！加“精华”。高兴！！！

应该谢谢焱鑫磊带来的好帖呢{:4_187:}

页: [1]

花潮论坛's Archiver

《痴情的我犯下痴情的错》赵洋 DJ（四宫格）