为甚不回家——致奋战在抗疫一线的所有人

马黑黑

加林森

老黑的这个制作真漂亮，赞！

马黑黑

加林森 发表于 2022-4-8 22:20
老黑的这个制作真漂亮，赞！

蟹蟹

加林森

马黑黑 发表于 2022-4-8 22:21
蟹蟹

祝愿大家都平安啊！

马黑黑

加林森 发表于 2022-4-8 23:32
祝愿大家都平安啊！

共同祝愿

加林森

马黑黑 发表于 2022-4-8 23:36
共同祝愿

就是，共同祝愿！辛苦了这些医务工作者； ！

马黑黑

加林森 发表于 2022-4-8 23:38
就是，共同祝愿！辛苦了这些医务工作者； ！

不仅仅他们

加林森

马黑黑 发表于 2022-4-8 23:42
不仅仅他们

明白的。

红影

这个转动线圈做成按钮，也很有意思。
帖子主题真好，和黑黑共同期待疫情早日过去，还我月朗风清，国泰民安

红影

这个烟雾的运用也很巧妙，原来即使有底色的，设置透明度也能让底色淡化，这思路真不错，就不用使劲去找完全透明的动图了呢

红影

其实昨天就想问了，perspective: 3000px;这个值是怎么确定的，为什么要这么大？

马黑黑

红影 发表于 2022-4-9 07:25
其实昨天就想问了，perspective: 3000px;这个值是怎么确定的，为什么要这么大？

这个呢，一般来说，数值越大，景深的效果理论上就越强烈，但也依据诸多因素。此外，景深与父元素的尺寸要结合起来，还要综合考虑屏幕的普通大小，不然父元素尺寸大、景深设置的也大，某些情形下会直接作用于浏览器的两个滚动条。

马黑黑

红影 发表于 2022-4-9 07:12
这个烟雾的运用也很巧妙，原来即使有底色的，设置透明度也能让底色淡化，这思路真不错，就不用使劲去找完全 ...

烟雾的应用方式的确如你已经发现的，这是很巧妙的，我儿子见到这个效果也很惊讶。我儿子提了个问题，说我这个设计，其他没什么，就是那个旋转球体，在手机端是会看不到的，即使使用谷歌的浏览器。我验证了一下，的确如此。

问题出在伪元素的层。它是子元素，在本帖还布满整个页面，对主体元素来说是覆盖性质的。在pc版本的现代浏览器里是没问题的，到手机端不然，球体出不来。

马黑黑

红影 发表于 2022-4-9 07:09
这个转动线圈做成按钮，也很有意思。
帖子主题真好，和黑黑共同期待疫情早日过去，还我月朗风清，国泰民安 ...

谢谢。
继续说说球体不可见的原理。我说出我的想法后，我儿子否认了我的观点，不是层的问题，是移位的问题。手机对认为左移的对象通常不予理睬，子元素如果放在被偏移的区域会看不到，仅此而已。刚刚，我试了好几次，z-index试过，位置试过，最后发现我儿子说的是对的。现在，我把球体放到中间来，手机浏览器能够控制音乐了。

樵歌

小墨把香脆甜的烤玉米献给搞疫一线的天使们，这个原生态的礼物真好。

小九

黑黑这个图片代码分享一个，谢谢

马黑黑

小九 发表于 2022-4-9 09:27
黑黑这个图片代码分享一个，谢谢

1. <style>
   
2. .stage{
   
3.         margin: auto;
   
4.         position: relative;
   
5.         left: -214px;
   
6.         width: 1024px;
   
7.         height: 682px;
   
8.         background: #666 url('https://638183.freep.cn/638183/Pic/2022/jia.jpg') no-repeat center/cover;
   
9.         perspective: 3000px;
   
10.         perspective-origin: 50% 50%;
    
11. }
    
12. .stage::before {
    
13.         content: '';
    
14.         position: absolute;
    
15.         width: 100%;
    
16.         height: 100%;
    
17.         background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
    
18.         opacity: .1;
    
19. }
    
20. .circle {
    
21.         --x: 80px;
    
22.         position: absolute;
    
23.         width: var(--x);
    
24.         height: var(--x);
    
25.         left: 330px;
    
26.         top: 190px;
    
27.         cursor: pointer;
    
28.         transform-style: preserve-3d;
    
29.         animation: rot 5s linear infinite;
    
30. }
    
31. .circle div {
    
32.         position: absolute;
    
33.         width: 100%;
    
34.         height: 100%;
    
35.         border: 1px solid skyblue;
    
36.         border-radius: 50%;
    
37.         padding: 0;
    
38. }
    
39. .circle div:nth-child(1){ transform:rotateY(0deg);}
    
40. .circle div:nth-child(2){ transform:rotateY(30deg);}
    
41. .circle div:nth-child(3){ transform:rotateY(60deg);}
    
42. .circle div:nth-child(4){ transform:rotateY(90deg);}
    
43. .circle div:nth-child(5){ transform:rotateY(120deg);}
    
44. .circle div:nth-child(6){ transform:rotateY(150deg);}
    
45. @keyframes rot{
    
46.         0%{ transform: rotateZ(30deg) rotateY(0turn);}
    
47.         100%{ transform: rotateZ(30deg) rotateY(1turn);}
    
48. }
    
49. </style>
    
50. 
    
51. <div class="stage">
    
52.         <div class="circle">
    
53.                 <div></div>
    
54.                 <div></div>
    
55.                 <div></div>
    
56.                 <div></div>
    
57.                 <div></div>
    
58.                 <div></div>
    
59.         </div>
    
60. </div>
    
61. 
    
62. <script>
    
63. var au = document.createElement('audio');
    
64. au.src = 'http://www.kumeiwp.com/sub/filestores/2022/02/19/dc151655c9c2844f0b9daf26a0cee30f.mp3';
    
65. au.loop = true;
    
66. au.autoplay = true;
    
67. document.querySelector('.stage').appendChild(au);
    
68. document.querySelector('.circle').onclick = function() {
    
69.         au.paused ? (au.play(), this.style.animationPlayState = 'running') : (au.pause(), this.style.animationPlayState = 'paused');
    
70. }
    
71. </script>

复制代码

红影

马黑黑 发表于 2022-4-9 08:29
这个呢，一般来说，数值越大，景深的效果理论上就越强烈，但也依据诸多因素。此外，景深与父元素的尺寸要 ...

哦哦，其实还是不太懂，但至少知道一些了，谢谢黑黑

红影

马黑黑 发表于 2022-4-9 08:34
烟雾的应用方式的确如你已经发现的，这是很巧妙的，我儿子见到这个效果也很惊讶。我儿子提了个问题，说我 ...

不是设置了透明度了，手机还是看不到么？

红影

马黑黑 发表于 2022-4-9 08:44
谢谢。
继续说说球体不可见的原理。我说出我的想法后，我儿子否认了我的观点，不是层的问题，是移位的问 ...

看起来以前做的动图平铺也会让手机端看不到的吧，没手机玩过论坛，还不知道呢。