加林森 发表于 2022-4-24 13:31

《思念一个人可以思念到多久》 -- 南宫嘉骏

本帖最后由 加林森 于 2022-4-25 21:25 编辑 <br /><br /><style>
        .papa { left: -214px; width: 1024px; height: 700px; position: relative; background-color: #eee; }
        .papa::before { content: ''; position: absolute; width: 8px; height: -200px; left: calc(10% - 4px); top: 180%; background: #2f4f4f; }
        .fan { position: absolute; width: 100px; height: 100px; left: 200(50% - 50px); top: 300(50% - 50px);cursor: pointer; animation: rot .25s linear infinite; }
        .fan::before, .fan::after { content: ''; position: absolute; background: #c60046; }
        .fan::before { width: 100%; height: 10px; left: 700(50% - 50px); top: calc(50% - 5px); }
        .fan::after { width: 10px; height: 100%; left: calc(50% - 5px); top: calc(50% - 50px); }
        .papa img { position: absolute; border: 20; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div class="papa">
        <img style="left:0; bottom: 0; width: 200px; z-index: 10;" src="https://pic.imgdb.cn/item/6264de05239250f7c5d76cef.png" alt="" />
        <img style="top: 0; right: 0; width: 1024px; transform: mix-blend-mode: multiply;" src="https://pic.imgdb.cn/item/6264dcfd239250f7c5d4ecc3.jpg" alt="" />
        <div class="fan"></div>
</div>

<script>
let papa = document.querySelector(".papa");
let fc = document.querySelector(".fan");
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/23/b21f6c5cde6fced6f078b9642ba176d7.mp3";
let flag = true;
au.autoplay = flag;
au.loop= true;
fc.appendChild(au);
chgc();
let cc = setInterval(chgc, 6000);

papa.onclick = function(){
        flag ? (fc.style.animationPlayState = "paused", au.pause(), flag = false) :
                (fc.style.animationPlayState = "running", au.play(), flag = true);
}

function chgc(){
        let c1 = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
        let c2 = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
        papa.style.background = `linear-gradient(120deg,${c1},${c2})`;
}
</script>

加林森 发表于 2022-4-24 13:36

@马黑黑

红影 发表于 2022-4-24 14:29

文字怎么是反的？那张小图也跑下面来了呢。

红影 发表于 2022-4-24 14:30

有文字的话，纵向旋转180度那句语句可以不要，其实不一定每张图图都要旋转的。

红影 发表于 2022-4-24 14:31

其实底图变色挺好看的，一会我也去做一个玩玩{:4_173:}

加林森 发表于 2022-4-24 16:40

红影 发表于 2022-4-24 14:29
文字怎么是反的？那张小图也跑下面来了呢。

我在新的编辑器里面制作的，结果它就自动反转了、{:4_189:}

加林森 发表于 2022-4-24 16:40

红影 发表于 2022-4-24 14:30
有文字的话，纵向旋转180度那句语句可以不要，其实不一定每张图图都要旋转的。

嗯嗯，自动的。

加林森 发表于 2022-4-24 16:41

红影 发表于 2022-4-24 14:31
其实底图变色挺好看的，一会我也去做一个玩玩

好啊，等着你的作品。{:4_204:}

马黑黑 发表于 2022-4-24 17:12

红影 发表于 2022-4-24 14:29
文字怎么是反的？那张小图也跑下面来了呢。

我的原帖用了rotateY，是因为图片不合适，要调整一下。队长应该吧这个去掉，这样就可以了

加林森 发表于 2022-4-24 17:52

马黑黑 发表于 2022-4-24 17:12
我的原帖用了rotateY，是因为图片不合适，要调整一下。队长应该吧这个去掉，这样就可以了

好的好的，我这就去掉吧。

马黑黑 发表于 2022-4-24 18:47

红影 发表于 2022-4-24 14:30
有文字的话，纵向旋转180度那句语句可以不要，其实不一定每张图图都要旋转的。

正解。这是根据需要来的

红芍药 发表于 2022-4-24 19:09

队长制作漂亮，歌也好听。。{:4_199:}{:4_199:}

大猫咪 发表于 2022-4-24 19:09

队长学习的真快，好听有好看    赞！晚上好{:4_204:}{:4_190:}

加林森 发表于 2022-4-24 19:21

红芍药 发表于 2022-4-24 19:09
队长制作漂亮，歌也好听。。

谢谢芍药！晚上好！{:4_204:}

加林森 发表于 2022-4-24 19:22

大猫咪 发表于 2022-4-24 19:09
队长学习的真快，好听有好看    赞！晚上好

猫猫晚上好。跟着学习真好。{:4_204:}{:4_190:}

大猫咪 发表于 2022-4-24 19:26

加林森 发表于 2022-4-24 19:22
猫猫晚上好。跟着学习真好。

嗯嗯   忙完下星期和队长一起学习！

{:4_204:}{:4_179:}

加林森 发表于 2022-4-24 20:55

大猫咪 发表于 2022-4-24 19:26
嗯嗯   忙完下星期和队长一起学习！

好的好的，祝你考个好成绩！{:4_204:}{:4_179:}

大猫咪 发表于 2022-4-24 21:01

加林森 发表于 2022-4-24 20:55
好的好的，祝你考个好成绩！

谢谢队长   猫一定努力 {:4_187:}{:4_179:}

加林森 发表于 2022-4-24 21:01

大猫咪 发表于 2022-4-24 21:01
谢谢队长   猫一定努力

嗯嗯，加油！{:4_171:}{:4_179:}

大猫咪 发表于 2022-4-24 21:02

加林森 发表于 2022-4-24 21:01
嗯嗯，加油！

{:4_179:}
页: [1] 2
查看完整版本: 《思念一个人可以思念到多久》 -- 南宫嘉骏