论坛 › 欢乐水吧 › 蓝

马黑黑 发表于 2022-5-10 20:40

蓝

<style>
.outer {
        left: -214px;
        width: 1024px;
        height: 560px;
        background-color: rgb(0,0,255);
        background: linear-gradient(45deg,rgba(0,0,255,.65) 65%,rgba(0,0,250,.7) 64.5%);
        box-shadow: 0 0 2px gray,1px 1px 4px gray;
        position: relative;
}
.wrap {
        position: absolute;
        width: 300px;
        height: 300px;
        left: calc(100% - 320px);
        top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: rgba(0,0,255,.75);
        background-image: radial-gradient(rgba(200,200,200,.6),transparent 1px),radial-gradient(circle at 20% 10%, rgba(200,200,200,.85),transparent 2px);
        background-size: 75px 75px;
}
.star {
        width: 50%;
        height: 50%;
        background: lightblue;
        clip-path: polygon(0% 50%,45% 45%,50% 0%,55% 45%,100% 50%,55% 55%, 50% 100%,45% 55%);
        animation: flash 1s ease-in-out infinite alternate;
}
.swrap{
        width: 100px;
        height: 100px;
        left: 220px;
        top: 40%;
        filter: blur(1px);
        opacity: .5;
        cursor: pointer;
        animation: rot 4s linear infinite;
}
.hole {
        position: absolute;
        width: 560px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(rgba(10,10,200,.45),transparent,rgba(10,10,200,.05));
}
.p5star {
        position: absolute;
        width: 500px;
        height: 500px;
        left: calc(50% - 250px);
        top: calc(50% - 250px);
        background: rgba(100,100,255,.8);
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@keyframes flash { to { opacity: 0.1; transform: skew(-2deg); } }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>

<div class="outer">
        <div class="wrap">
                <div class="star"></div>
        </div>
        <div class="hole"></div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/22/0604c06175080626f656bc442b8be93e.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let flag = true;
let p5str = '';

for(j=5; j>0; j--){
        p5str += `<div class='p5star' style='width: ${j*100}px; height: ${j*100}px; transform: rotate(${j + 5}deg)'></div>`;
}
p5str += `        <div class='wrap swrap'><div class="star"></div></div>`;
document.querySelector('.outer').innerHTML += p5str;

let sw = document.querySelector('.swrap');
let au = document.querySelector('#aud');

sw.onclick = function(){
        flag ? (au.pause(), this.style.animationPlayState = 'paused',flag = false) : (au.play(), this.style.animationPlayState = 'running',flag = true);
}
console.log(sw);
</script>

东篱闲人 发表于 2022-5-10 20:52

这个啥说道？{:5_115:}

马黑黑 发表于 2022-5-10 21:00

东篱闲人 发表于 2022-5-10 20:52
这个啥说道？

就是蓝色调

醉美水芙蓉 发表于 2022-5-10 21:03

马黑黑 发表于 2022-5-10 21:04

醉美水芙蓉 发表于 2022-5-10 21:03
谢谢黑黑老师分享！真漂亮！

一些蓝颜色的堆叠而已

绿叶清舟 发表于 2022-5-10 21:05

可以搞个星星闪了

马黑黑 发表于 2022-5-10 21:24

绿叶清舟 发表于 2022-5-10 21:05
可以搞个星星闪了

在蓝色下，浅蓝色看着像白色

绿叶清舟 发表于 2022-5-10 21:29

马黑黑 发表于 2022-5-10 21:24
在蓝色下，浅蓝色看着像白色

不说还真没注意也是蓝色的了

加林森 发表于 2022-5-10 21:30

好漂亮的制作，老黑真好！歌曲好听！

马黑黑 发表于 2022-5-10 21:30

加林森 发表于 2022-5-10 21:30
好漂亮的制作，老黑真好！歌曲好听！

侃侃的歌吧

马黑黑 发表于 2022-5-10 21:31

绿叶清舟 发表于 2022-5-10 21:29
不说还真没注意也是蓝色的了

全是蓝色系的

加林森 发表于 2022-5-10 21:33

马黑黑 发表于 2022-5-10 21:30
侃侃的歌吧

我才发了一首歌，你去看看！

绿叶清舟 发表于 2022-5-10 21:46

马黑黑 发表于 2022-5-10 21:31
全是蓝色系的

看你说了上去再看才发现的

马黑黑 发表于 2022-5-10 21:49

绿叶清舟 发表于 2022-5-10 21:46
看你说了上去再看才发现的

人的视觉是很容易受欺骗的

马黑黑 发表于 2022-5-10 21:50

加林森 发表于 2022-5-10 21:33
我才发了一首歌，你去看看！

OK

加林森 发表于 2022-5-10 22:09

马黑黑 发表于 2022-5-10 21:50
OK

谢谢！

马黑黑 发表于 2022-5-10 22:36

加林森 发表于 2022-5-10 22:09
谢谢！

{:4_180:}

红影 发表于 2022-5-10 22:39

这么多星星啊，真漂亮{:4_187:}

红影 发表于 2022-5-10 22:42

才注意到，有四角星，也有五角星，星星大集合{:4_173:}

马黑黑 发表于 2022-5-10 23:21

红影 发表于 2022-5-10 22:42
才注意到，有四角星，也有五角星，星星大集合

它们的颜色都是蓝色系列

查看完整版本: 蓝