体验景深的作用
<style>.outer {
margin: auto;
width: 700px;
min-height: 520px;
position: relative;
background: #333 linear-gradient(skyblue,silver,olive);
perspective: 800px;
}
.outer input { position: absolute; left: 10px; top: 10px; }
.leaf {
width: 80px;
height: 80px;
border-radius: 0 100%;
background-image: linear-gradient(darkgreen,gold), linear-gradient(45deg,transparent 49%,#eee 50%,transparent 51%);
background-blend-mode: multiply;
transform-style: preserve-3d;
position: absolute;
}
</style>
<div class="outer"></div>
<p style="text-align: center;padding: 20px;">
<input id="p-txt" type="number" placeholder="1000" />
<input id="p-sub" type="button" value=" 更换景深 " />
</p>
<script>
let outer = document.querySelector(".outer");
let au = document.createElement("iframe");
au.src = "https://music.163.com/outchain/player?type=2&id=35847622&auto=1&height=66";
au.style.display = "none";
outer.appendChild(au);
let ww = outer.clientWidth;
let hh = outer.clientHeight;
let str = "";
for(j=0; j< 100; j++){
let left = Math.floor(Math.random() * (ww - 100));
let top = Math.floor(Math.random() * (hh - 100));
let angle = Math.floor(Math.random() * 180);
str += `<div class="leaf" style="left: ${left}px; top: ${top}px; transform: rotateY(${angle}deg);"></div>\n`;
}
outer.innerHTML += str;
document.getElementById("p-sub").onclick = function(){
let num = document.getElementById("p-txt").value;
if(num <= 0) num = 1000;
outer.style.perspective = num + "px";
}
</script>
帖子景深 设置为：
perspective: 800px;
可以试着在文本框里设置一个数字，然后点击“更换景深”按钮，以查看效果。数值输入不合法时默认为1000 我输入一个小的数字，忽然图形变得很大{:4_173:} 1000以上好像变化不大了。 音乐很好听{:4_187:} 红影 发表于 2022-4-24 21:19
音乐很好听
音乐不错的 红影 发表于 2022-4-24 21:17
我输入一个小的数字，忽然图形变得很大
没有被吓倒就好 红影 发表于 2022-4-24 21:19
1000以上好像变化不大了。
那是正常值了 非常有用，谢谢老黑。{:4_199:} 加林森 发表于 2022-4-25 18:18
非常有用，谢谢老黑。
{:4_190:} 马黑黑 发表于 2022-4-25 19:01
谢茶 马黑黑 发表于 2022-4-24 21:52
音乐不错的
叫什么名啊？ 马黑黑 发表于 2022-4-24 21:52
没有被吓倒就好
有趣{:4_189:} 马黑黑 发表于 2022-4-24 21:53
那是正常值了
哦，超过一定的值就正常了吧。 红影 发表于 2022-4-25 22:46
哦，超过一定的值就正常了吧。
景深与设置为景深元素的尺寸其实也有关系，它的大小与景深的大小，会决定子元素的Z轴上的远近 红影 发表于 2022-4-25 22:46
有趣
我刚做时被吓了一跳 红影 发表于 2022-4-25 22:45
叫什么名啊？
红颜旧，没听过吧 马黑黑 发表于 2022-4-25 23:16
景深与设置为景深元素的尺寸其实也有关系，它的大小与景深的大小，会决定子元素的Z轴上的远近
“景深与设置为景深元素的尺寸其实也有关系”，嗯嗯，记下了。 马黑黑 发表于 2022-4-25 23:16
我刚做时被吓了一跳
这样可以互动的语句也有意思，黑黑厉害{:4_187:} 马黑黑 发表于 2022-4-25 23:17
红颜旧，没听过吧
原来是这首，听过的，只是不太熟悉。