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

马黑黑 发表于 2022-4-8 21:59

本帖最后由马黑黑于 2022-4-9 08:39 编辑 <br /><br /><style>
.stage{
margin: auto;
position: relative;
left: -214px;
width: 1024px;
height: 682px;
background: #666 url('https://638183.freep.cn/638183/Pic/2022/jia.jpg') no-repeat center/cover;
perspective: 3000px;
perspective-origin: 50% 50%;
cursor: pointer;
}
.stage::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
opacity: .1;
}
.circle {
--x: 80px;
position: absolute;
width: var(--x);
height: var(--x);
left: 330px;
top: 190px;
transform-style: preserve-3d;
animation: rot 5s linear infinite;
}
.circle div {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid skyblue;
border-radius: 50%;
padding: 0;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot{
0%{ transform: rotateZ(30deg) rotateY(0turn);}
100%{ transform: rotateZ(30deg) rotateY(1turn);}
}
</style>

<div class="stage">
<div class="circle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

<script>
var au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/02/19/dc151655c9c2844f0b9daf26a0cee30f.mp3';
au.loop = true;
au.autoplay = true;
document.querySelector('.stage').appendChild(au);
document.querySelector('.circle').onclick = function() {
au.paused ? (au.play(), this.style.animationPlayState = 'running') : (au.pause(), this.style.animationPlayState = 'paused');
}
</script>

加林森 发表于 2022-4-8 22:20

老黑的这个制作真漂亮，赞！{:4_199:}

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

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

蟹蟹

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

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

祝愿大家都平安啊！{:4_204:}

马黑黑 发表于 2022-4-8 23:36

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

共同祝愿

加林森 发表于 2022-4-8 23:38

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

就是，共同祝愿！辛苦了这些医务工作者；！{:4_204:}

马黑黑 发表于 2022-4-8 23:42

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

不仅仅他们

加林森 发表于 2022-4-8 23:50

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

明白的。

红影发表于 2022-4-9 07:09

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

红影发表于 2022-4-9 07:12

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

红影发表于 2022-4-9 07:25

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

马黑黑 发表于 2022-4-9 08:29

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

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

马黑黑 发表于 2022-4-9 08:34

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

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

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

马黑黑 发表于 2022-4-9 08:44

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

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

樵歌发表于 2022-4-9 09:03

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

小九发表于 2022-4-9 09:27

黑黑这个图片代码分享一个，谢谢{:4_187:}{:4_199:}

马黑黑 发表于 2022-4-9 09:47

本帖最后由马黑黑于 2022-4-9 09:49 编辑

小九发表于 2022-4-9 09:27
黑黑这个图片代码分享一个，谢谢<style>
.stage{
margin: auto;
position: relative;
left: -214px;
width: 1024px;
height: 682px;
background: #666 url('https://638183.freep.cn/638183/Pic/2022/jia.jpg') no-repeat center/cover;
perspective: 3000px;
perspective-origin: 50% 50%;
}
.stage::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
opacity: .1;
}
.circle {
--x: 80px;
position: absolute;
width: var(--x);
height: var(--x);
left: 330px;
top: 190px;
cursor: pointer;
transform-style: preserve-3d;
animation: rot 5s linear infinite;
}
.circle div {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid skyblue;
border-radius: 50%;
padding: 0;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot{
0%{ transform: rotateZ(30deg) rotateY(0turn);}
100%{ transform: rotateZ(30deg) rotateY(1turn);}
}
</style>

<div class="stage">
<div class="circle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

<script>
var au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/02/19/dc151655c9c2844f0b9daf26a0cee30f.mp3';
au.loop = true;
au.autoplay = true;
document.querySelector('.stage').appendChild(au);
document.querySelector('.circle').onclick = function() {
au.paused ? (au.play(), this.style.animationPlayState = 'running') : (au.pause(), this.style.animationPlayState = 'paused');
}
</script>

红影发表于 2022-4-9 10:39

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

哦哦，其实还是不太懂，但至少知道一些了，谢谢黑黑{:4_187:}

红影发表于 2022-4-9 10:42

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

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

红影发表于 2022-4-9 10:45

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

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

页: [1] 2 3

花潮论坛's Archiver

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