《放下》流苏（CSS九宫格特效） - 【动感音乐】 - 中画网 - Powered by Discuz! Archiver

论坛 › 【动感音乐】 › 《放下》流苏（CSS九宫格特效）

焱鑫磊 发表于 2021-12-12 19:50

《放下》流苏（CSS九宫格特效）

<style type="text/css">.container{ z-index: 100;width: 994px; height: 592px; margin-top:650px; margin-left:-100px;box-shadow:0px 0px 1px 2px #694006, 0px 0px 0px 10px #f0d4ad,0px 0px 0px 12px #000000,0px 0px 120px 125px #800000; overflow: hidden; border-radius:0%;background-image:url(https://up.enterdesk.com/edpic/8d/d6/68/8dd66871ec92fc5ee73a3bc4e21fea4f.jpg);background-size: 100% 100%; transform: skewX(0deg) skewX(0deg); text-align: center;}
.video{top: 0px;
left:0px;
position: absolute;
width: 100%;
height: 100%;
}
.square
{top: 0px;
left:0px;
position: absolute;background-color:#000000;background-image:url(https://s4.ax1x.com/2021/12/12/oqjqOK.gif);
width: 330px;border:2px solid #ffffff;filter:contrast(150%);
height: 596px;}
.square:nth-child(1)
{animation:change1 35s ease infinite;}
.square:nth-child(2)
{animation:change2 35s ease infinite;}
.square:nth-child(3)
{animation:change3 35s ease infinite;}
@keyframes change1
{0%{ transform: translate(0%,-150%)scale(1)rotateX(0deg)rotateY(0deg);}
10% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
20% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
30% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
40% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(20deg);}
50% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(-20deg);}
60% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
70% { transform: translate(0%,0%)scale(1,1)rotateX(45deg)rotateY(20deg);}
75% { transform: translate(0%,0%)scale(1,1)rotateX(-45deg)rotateY(20deg);}
80% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
90% { transform: translate(0%,0%)scale(1,1)rotateX(180deg)rotateY(360deg);}
95%{transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
}
@keyframes change2
{0%{ transform: translate(100%,-450%)scale(1,1)rotateX(0deg)rotateY(0deg);}
10% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
20% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
30% { background:red;transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
40% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(20deg);}
50% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(-20deg);}
60% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
70% { transform: translate(100%,0%)scale(1.15,1)rotateX(-45deg)rotateY(20deg);}
75% { transform: translate(100%,0%)scale(1.15,1)rotateX(45deg)rotateY(20deg);}
80% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
90%{ transform: translate(100%,0%)scale(0.9,0.9)rotateX(0deg)rotateY(0deg);}
95%{transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
}
@keyframes change3
{0%{ transform: translate(200%,-850%)scale(1)rotateX(0deg)rotateY(0deg);}
10% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
20% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
30% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
40% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(20deg);}
50% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(-20deg);}
60% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
70% { transform: translate(200%,0%)scale(1,1)rotateX(45deg)rotateY(20deg);}
75% { transform: translate(200%,0%)scale(1,1)rotateX(-45deg)rotateY(20deg);}
80% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
90% { transform: translate(200%,0%)scale(1,1)rotateX(180deg)rotateY(-360deg);}
95%{transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
}
</style>
<div class="container">
<div class="square"><img src="https://up.enterdesk.com/edpic/32/f7/31/32f731e88bd62f381d23fc59f41dd964.jpg" style="width: 100%; height: 198px;opacity:0.80;" /><img src="https://up.enterdesk.com/edpic/25/fa/45/25fa45cf5ce5feebbe7acfef8ddfe481.jpg" style="width: 100%; height: 198px;opacity:0.80;" /><img src="https://up.enterdesk.com/edpic/7b/4e/58/7b4e58140cf930e90a0cc003565d1466.jpg" style="width: 100%; height: 199px;opacity:0.80;" /></div>

<div class="square"><img src="https://up.enterdesk.com/edpic/e5/80/26/e580263f0a04c057d16cd932d5f05afd.jpg" style="width: 100%; height: 198px;opacity:0.80;" /><img src="https://up.enterdesk.com/edpic/8e/38/d1/8e38d14dd75b4ea3aeb817e4a3b82433.jpg" style="width: 100%; height: 198px;opacity:0.80;" /><img src="https://up.enterdesk.com/edpic/ee/a9/e6/eea9e62add1d806b2db79a9993cd7867.jpg" style="width: 100%; height: 199px;opacity:0.80;" /></div>

<div class="square"><img src="https://up.enterdesk.com/edpic/69/5d/b5/695db5c73e7eb1a9ca1c88e3b5b9e990.jpg" style="width: 100%; height: 198px;opacity:0.80;" /><img src="https://up.enterdesk.com/edpic/4a/eb/62/4aeb62e516c9c21452c9ba79b31251cf.jpg" style="width: 100%; height: 198px;opacity:0.80;" /><img src="https://up.enterdesk.com/edpic/9d/e5/3b/9de53b52b82e70c8c4b427b8d51429ef.jpg" style="width: 100%; height: 199px;opacity:0.80;" /></div>
<style type="text/css">.items {position: relative;
width: 870px;
height: 100px;
top:460px;LEFT: 60px;
box-sizing: border-box;
z-index: 100;
background-size: cover;
animation: slider 0.5s linear infinite ;
transform-origin: center;position: relative;
}
@keyframes slider {0%,100%{
            margin: 2px 0px;filter:hue-rotate(360deg)brightness(550%)drop-shadow(0px 0px 60px #FF0000)drop-shadow(0px 0px 60px #FF0000)drop-shadow(0px 0px 60px #FF0000);}
         50%{
            margin: -2px 0px;filter:hue-rotate(0deg)brightness(350%)drop-shadow(0px 0px 60px #fff000)drop-shadow(0px 0px 60px #fff000)drop-shadow(0px 0px 60px #fff000);}}
</style>
<div class="items"><embed allownetworking="internal" allowscriptaccess="never" flashvars="mp3=http://mp.333ttt.com/mp3music/157481191.mp3&mp3b=http%3A//antiserver.kuwo.cn/anti.s?format=mp3%26rid=157481191%26br=320kmp3%26type=convert_url%26response=res&lrc=
《放下》流苏
作词：偝影水火相容
作曲：水火相容嘉顺
LRC歌词制作：焱鑫磊
一句放下点滴就成永远
一句晚安把黎明去等待
一些人时时刻刻在挂念
一些话林林总总没改变
不经意落下就成了过往
不经意把话语留在嘴边
不经意就让时光去辗转
不经意把岁月化做依然
往事如烟时光总在变迁
蓦然间韶华已褪去容颜
别让遗憾堆满了你双眼
清风掠过我们记忆发间
别去问明天是否有晴天
心中充满阳光无比灿烂
只要保持那份真切温暖
相守快乐时光岁月静好
《放下》
作词：偝影水火相容
作曲：水火相容嘉顺
编曲：潇语
演唱：流苏
不经意落下就成了过往
不经意把话语留在嘴边
不经意就让时光去辗转
不经意把岁月化做依然
往事如烟时光总在变迁
蓦然间韶华已褪去容颜
别让遗憾堆满了你双眼
清风掠过我们记忆发间
别去问明天是否有晴天
心中充满阳光无比灿烂
只要保持那份真切温暖
相守快乐时光岁月静好
只要保持那份真切温暖
相守快乐时光岁月静好
相守快乐时光岁月静好

&mp3b=&mp3n=&&gczt=悟空大字库&gczh=40&gcys=fF0000&gczzys=00ff00&gcljys=000000&gcljld=1&dgbjtm=0" height="100" invokeurls="false" quality="high" src="http://dashan.link/zj/dqyhgczz.swf" style="height: 100px; width: 870px;filter:drop-shadow(0px 0px 1px #000000) drop-shadow(0px 0px 1px #000000);opacity:1.00;" type="application/x-shockwave-flash" width="870" wmode="transparent"></embed></div>
</div>

<div style="height: 650px;"> </div>

蓝魔发表于 2021-12-12 23:57

欣赏一下，谢谢。

焱鑫磊 发表于 2021-12-13 08:32

jjybzxw 发表于 2021-12-12 23:57
欣赏一下，谢谢。

问候老师好！

巫荣云师 发表于 2021-12-13 13:51

欣赏收藏老师的好看又好听，点赞！

焱鑫磊 发表于 2021-12-13 23:34

巫荣云师发表于 2021-12-13 13:51
欣赏收藏老师的好看又好听，点赞！

问候老师好！

页: [1]

查看完整版本: 《放下》流苏（CSS九宫格特效）