加林森 发表于 2022-4-23 22:32

《我只想做你的太阳》-- 南辰Music（试帖。根据黑黑的教程制作的

本帖最后由 加林森 于 2022-4-24 12:19 编辑 <br /><br /><style>
        .papa { left: -100px; width: 900px; height: 600px; 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: calc(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/626401c2239250f7c538ea1c.png" alt="" />
        <img style="top: 0; right: 0; width: 900px; transform: rotateY(180deg); mix-blend-mode: multiply;" src="https://pic.imgdb.cn/item/6263f1e3239250f7c50b602d.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/21/cc9b3efd5f253beda2e987b3ba7969b5.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-23 22:32

@马黑黑

加林森 发表于 2022-4-23 22:33

这个是试帖，你帮着看看，谢谢！

马黑黑 发表于 2022-4-23 22:35

风车应该移个位置

加林森 发表于 2022-4-23 22:37

马黑黑 发表于 2022-4-23 22:35
风车应该移个位置

嗯嗯，我匆匆忙忙制作的，这个不算成功的，只是变化挺漂亮的。

马黑黑 发表于 2022-4-23 22:46

加林森 发表于 2022-4-23 22:37
嗯嗯，我匆匆忙忙制作的，这个不算成功的，只是变化挺漂亮的。

挺好的

加林森 发表于 2022-4-23 23:00

马黑黑 发表于 2022-4-23 22:46
挺好的

谢谢老黑！{:4_190:}

加林森 发表于 2022-4-23 23:10

明天来修改。我准备休息了。谢谢老黑1{:4_171:}

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

队长也跟着做出来了。那个转动的风车在人脸上不太好呢，换个位置肯定更好{:4_187:}

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

红影 发表于 2022-4-24 08:14
队长也跟着做出来了。那个转动的风车在人脸上不太好呢，换个位置肯定更好

嗯嗯，现在我来修改。

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

马黑黑 发表于 2022-4-23 22:46
挺好的

老黑我怎么移不动了呢？烤脑筋！~~~~~~~~~~{:4_203:}

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

加林森 发表于 2022-4-24 11:41
老黑我怎么移不动了呢？烤脑筋！~~~~~~~~~~

你要移动的对象是风车，它对应的CSS代码是：

.fan { position: absolute; width: 100px; height: 100px; left: calc(50% - 50px); top: calc(50% - 50px);cursor: pointer; animation: rot .25s linear infinite; }

定位与上面红色的代码有关，我是为了绝对居中这么设定的，你可以改为类似下面的:

left: 200px; top: 300px;

加林森 发表于 2022-4-24 12:00

马黑黑 发表于 2022-4-24 11:47
你要移动的对象是风车，它对应的CSS代码是：

.fan { position: absolute; width: 100px; height: 100p ...

谢谢老黑，修改好了。谢谢！{:4_190:}

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

加林森 发表于 2022-4-24 12:00
谢谢老黑，修改好了。谢谢！

{:5_108:}

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

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


{:4_191:}

红芍药 发表于 2022-4-24 12:18

你们都是高手，啥都能作。{:4_199:}

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

红芍药 发表于 2022-4-24 12:18
你们都是高手，啥都能作。

跟到老黑学习的。{:4_204:}

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

加林森 发表于 2022-4-24 09:36
嗯嗯，现在我来修改。

看到已经修改好了，队长真棒{:4_187:}

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

红影 发表于 2022-4-24 14:42
看到已经修改好了，队长真棒

嗯嗯，谢谢你的提醒。{:4_204:}

红影 发表于 2022-4-25 21:16

加林森 发表于 2022-4-24 16:38
嗯嗯，谢谢你的提醒。

不客气啊，这样好看多了{:4_187:}
页: [1] 2
查看完整版本: 《我只想做你的太阳》-- 南辰Music（试帖。根据黑黑的教程制作的