虚

马黑黑

马黑黑

代码分享：

1. <style>
   
2. .bgDiv {
   
3.         left: -202px;
   
4.         width: 1000px;
   
5.         height: 644px;
   
6.         background-color: rgb(0,0,0);
   
7.         background-image: radial-gradient(circle, white 2px, green 32px, gray 36px,blue), linear-gradient(120deg, pink,tan);
   
8.         background-blend-mode: overlay,difference,lighten;
   
9.         animation: magic 50s ease-in-out infinite alternate;
   
10.         position: relative;
    
11. }
    
12. .bgDiv img { position: absolute; left: 0; top: 0; mix-blend-mode: multiply; }
    
13. .mamaDiv {
    
14.         width: 100px;
    
15.         height: 100px;
    
16.         left: calc(50% - 50px);
    
17.         top: calc(50% - 50px);
    
18.         cursor: pointer;
    
19.         position: relative;
    
20.         animation: rot 4s linear infinite;
    
21. }
    
22. .sonDiv {
    
23.         width: inherit;
    
24.         height: inherit;
    
25.         border: 1px solid red;
    
26.         border-radius: 0 100%;
    
27.         position: absolute;
    
28. }
    
29. @keyframes rot { to { transform: rotate(1turn); } }
    
30. @keyframes magic { to { background-color: rgb(255,255,255); } }
    
31. </style>
    
32. 
    
33. <div class="bgDiv">
    
34.         <img src ="https://638183.freep.cn/638183/t22/51/xu.jpg" alt="" />
    
35.         <div class="mamaDiv"></div>
    
36. </div>
    
37. 
    
38. <script>
    
39. let flag = true;
    
40. let mama = document.querySelector('.mamaDiv');
    
41. let divStr = '';
    
42. for(j=0; j<5; j++){
    
43.         let color = Math.random().toString(16).substr(-6);
    
44.         divStr += `<div class='sonDiv' style='border-color: #${color}; transform: rotate(${j*72}deg)'></div>`;
    
45. }
    
46. mama.innerHTML += divStr;
    
47. 
    
48. let au = document.createElement('audio');
    
49. au.src = 'http://www.kumeiwp.com/sub/filestores/2022/04/11/022571741f9b48464c2594566749ddb9.mp3';
    
50. au.autoplay = flag;
    
51. au.loop = true;
    
52. au.style.display = 'none';
    
53. mama.appendChild(au);
    
54. 
    
55. mama.onclick = function(){
    
56.         flag ? (au.pause(), this.style.animationPlayState = 'paused', flag = false) : (au.play(), this.style.animationPlayState = 'running', flag = true);
    
57. }
    
58. </script>
    

复制代码

加林森

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

加林森

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

马黑黑

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

感谢队长支持

加林森

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

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

马黑黑

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

共同学习交流

加林森

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

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

马黑黑

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

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

红影

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

加林森

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

谢谢老黑！明天见！

红影

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

马黑黑

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

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

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

马黑黑

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

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

红影

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

很神奇呢，明白了，是径向渐变带来的效果

红影

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

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

加林森

又来学习。。。

马黑黑

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

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

马黑黑

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

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

红影

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

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