论坛 › 欢乐水吧 › 虚

马黑黑 发表于 2022-5-5 21:48

虚

本帖最后由 马黑黑 于 2022-5-5 22:01 编辑 <br /><br /><style>
.bgDiv {
        left: -202px;
        width: 1000px;
        height: 644px;
        background-color: rgb(0,0,0);
        background-image: radial-gradient(circle, white 2px, green 32px, gray 36px,blue), linear-gradient(120deg, pink,tan);
        background-blend-mode: overlay,difference,lighten;
        animation: magic 50s ease-in-out infinite alternate;
        position: relative;
}
.bgDiv img { position: absolute; left: 0; top: 0; mix-blend-mode: multiply; }
.mamaDiv {
        width: 100px;
        height: 100px;
        left: calc(50% - 50px);
        top: calc(50% - 50px);
        cursor: pointer;
        position: relative;
        animation: rot 4s linear infinite;
}
.sonDiv {
        width: inherit;
        height: inherit;
        border: 1px solid red;
        border-radius: 0 100%;
        position: absolute;
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes magic { to { background-color: rgb(255,255,255); } }
</style>

<div class="bgDiv">
        <img src ="https://638183.freep.cn/638183/t22/51/xu.jpg" alt="" />
        <div class="mamaDiv"></div>
</div>

<script>
let flag = true;
let mama = document.querySelector('.mamaDiv');
let divStr = '';
for(j=0; j<5; j++){
        let color = Math.random().toString(16).substr(-6);
        divStr += `<div class='sonDiv' style='border-color: #${color}; transform: rotate(${j*72}deg)'></div>`;
}
mama.innerHTML += divStr;

let au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/04/11/022571741f9b48464c2594566749ddb9.mp3';
au.autoplay = flag;
au.loop = true;
au.style.display = 'none';
mama.appendChild(au);

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

马黑黑 发表于 2022-5-5 22:01

代码分享：
<style>
.bgDiv {
        left: -202px;
        width: 1000px;
        height: 644px;
        background-color: rgb(0,0,0);
        background-image: radial-gradient(circle, white 2px, green 32px, gray 36px,blue), linear-gradient(120deg, pink,tan);
        background-blend-mode: overlay,difference,lighten;
        animation: magic 50s ease-in-out infinite alternate;
        position: relative;
}
.bgDiv img { position: absolute; left: 0; top: 0; mix-blend-mode: multiply; }
.mamaDiv {
        width: 100px;
        height: 100px;
        left: calc(50% - 50px);
        top: calc(50% - 50px);
        cursor: pointer;
        position: relative;
        animation: rot 4s linear infinite;
}
.sonDiv {
        width: inherit;
        height: inherit;
        border: 1px solid red;
        border-radius: 0 100%;
        position: absolute;
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes magic { to { background-color: rgb(255,255,255); } }
</style>

<div class="bgDiv">
        <img src ="https://638183.freep.cn/638183/t22/51/xu.jpg" alt="" />
        <div class="mamaDiv"></div>
</div>

<script>
let flag = true;
let mama = document.querySelector('.mamaDiv');
let divStr = '';
for(j=0; j<5; j++){
        let color = Math.random().toString(16).substr(-6);
        divStr += `<div class='sonDiv' style='border-color: #${color}; transform: rotate(${j*72}deg)'></div>`;
}
mama.innerHTML += divStr;

let au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/04/11/022571741f9b48464c2594566749ddb9.mp3';
au.autoplay = flag;
au.loop = true;
au.style.display = 'none';
mama.appendChild(au);

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

加林森 发表于 2022-5-5 22:16

老黑厉害，我等会再看你的代码。

加林森 发表于 2022-5-5 22:56

我刚才用手机看的，现在回到电脑了，明天再来学习。谢谢老黑！{:4_191:}

马黑黑 发表于 2022-5-5 22:56

加林森 发表于 2022-5-5 22:56
我刚才用手机看的，现在回到电脑了，明天再来学习。谢谢老黑！

感谢队长支持

加林森 发表于 2022-5-5 22:58

马黑黑 发表于 2022-5-5 22:56
感谢队长支持

老黑不要这么客气啊。谢谢你教我们这么多的知识啊！

马黑黑 发表于 2022-5-5 22:59

加林森 发表于 2022-5-5 22:58
老黑不要这么客气啊。谢谢你教我们这么多的知识啊！

共同学习交流

加林森 发表于 2022-5-5 23:01

马黑黑 发表于 2022-5-5 22:59
共同学习交流

嗯嗯，我明天再来学习。今天有点累了，去陪老母亲。明天见！

马黑黑 发表于 2022-5-5 23:03

加林森 发表于 2022-5-5 23:01
嗯嗯，我明天再来学习。今天有点累了，去陪老母亲。明天见！

晚安，88，好梦，梦里发财

红影 发表于 2022-5-5 23:04

这个有点复杂的，底图是随时间变色的，花瓣也是没刷新都会变色，而且跟音乐关联{:4_187:}

加林森 发表于 2022-5-5 23:06

马黑黑 发表于 2022-5-5 23:03
晚安，88，好梦，梦里发财

谢谢老黑！明天见！{:5_110:}

红影 发表于 2022-5-5 23:08

看了半天没看出来，花瓣当中好像有个圆环，但语句里并没有。

马黑黑 发表于 2022-5-5 23:20

红影 发表于 2022-5-5 23:08
看了半天没看出来，花瓣当中好像有个圆环，但语句里并没有。

这是径向渐变出来的效果。渐变背景共两个，其中一个是线性渐变，另一个是径向渐变，再加background-color的rgb从0到255的来回变化，透过滤镜产生虚幻渐变的效果，并作用于图片。

把图片剥开，把rgb的关键帧动画拿走，就能看到径向渐变产生的中间图形。然后，background-color的改变，或第一个background-blend-mode滤镜的改变，整体背景效果都不会一样。

马黑黑 发表于 2022-5-5 23:25

红影 发表于 2022-5-5 23:04
这个有点复杂的，底图是随时间变色的，花瓣也是没刷新都会变色，而且跟音乐关联

一切都是虚的，所以不容易看出原理，所以我把它命名为虚。
这个呢，我原先是想做一个晶莹剔透的金色背景，是要做一个实的主题，结果发现改变滤镜时得到的效果很别致，就改变主意做虚的主题。

红影 发表于 2022-5-6 09:39

马黑黑 发表于 2022-5-5 23:20
这是径向渐变出来的效果。渐变背景共两个，其中一个是线性渐变，另一个是径向渐变，再加background-color ...

很神奇呢，明白了，是径向渐变带来的效果{:4_199:}

红影 发表于 2022-5-6 09:42

马黑黑 发表于 2022-5-5 23:25
一切都是虚的，所以不容易看出原理，所以我把它命名为虚。
这个呢，我原先是想做一个晶莹剔透的金色背景 ...

是啊，一直都觉得用滤镜能出现自己也想不到的效果呢。很神奇的功能{:4_187:}

加林森 发表于 2022-5-6 10:50

又来学习。。。

马黑黑 发表于 2022-5-6 12:58

红影 发表于 2022-5-6 09:42
是啊，一直都觉得用滤镜能出现自己也想不到的效果呢。很神奇的功能

的确很神奇，它有很独特的对颜色的算法

马黑黑 发表于 2022-5-6 13:04

红影 发表于 2022-5-6 09:39
很神奇呢，明白了，是径向渐变带来的效果

是的。径向渐变能产生圆、椭圆类的形状

红影 发表于 2022-5-6 22:19

马黑黑 发表于 2022-5-6 12:58
的确很神奇，它有很独特的对颜色的算法

这个好像很难掌握，今天试了一个，感觉不行，不知道为什么开始就是黑的，应该是从明亮变到黑的才对。

查看完整版本: 虚