一起《出去玩》（学习黑黑边框效果 祝福儿童节）
<style>
#tiezi { margin: 30px 0 30px calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 650px; overflow: hidden; position: relative; box-shadow: 3px 3px 6px gray; }
.pa { position: absolute;top: 0px; left: 0px;width: 100%; height: 100%; }
.son { position: absolute; width: 600px; height: 600px;left: 214px; top: 34px;}
.son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; border-radius: 50%; border: 20px outset cyan; transition: .7s; box-sizing: border-box; }
.son::before { left: 0; top: 0; border-color: tan transparent transparent GoldEnrod; }
.son::after { right: 0; bottom: 0; border-color: transparent Wheat tan transparent; }
.son:hover::before, .son:hover::after{ border-color: transparent transparent transparent transparent; border-radius: 0%;}
.pic { position: absolute;top: 0px; left: 0px;width: 100%; height: 100%; }
.pic1 { position: absolute;top: 60px; left: 220px;width: 600px; height: 600px; transition: 1.7s; opacity: 0.7; }
.pic2 { position: absolute;bottom: 80px; left: 20px;width: 260px; height: 140px; opacity: 0.9;transform: rotate(-10deg); }
.pa:hover .pic {opacity: 0; }
.pa:hover .pic1 {opacity: 0; }
.pa:hover .vid {opacity: 1; }
#player { position: absolute; bottom: 90px; right: 10px; }
#lrc { position: absolute; top: 10px; }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover;opacity: 0; pointer-events: none; }
</style>
<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2025804191" autoplay loop></audio>
<div class="pa">
<video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/06/5b509c34df30f_10s_big.mp4" loop muted></video>
<img class="pic" src="https://pic.imgdb.cn/item/665aaf94d9c307b7e9c214ed.jpg" alt="" />
<img class="pic1" src="https://pic.imgdb.cn/item/665ab34fd9c307b7e9c61278.png" alt="" />
<img class="pa" src="https://pic.imgdb.cn/item/665a8f46d9c307b7e9a0a2bb.png" alt="" /><div class="son"></div></div>
<img class="pic2" src="https://p3.itc.cn/images03/20200601/da7a36c34f1f4a9083f6cacd34610ab8.gif" alt="" />
<canvas id="player" width="240" height="80" ></canvas>
<canvas id="lrc" width="800" height="50" ></canvas>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_518.js';
document.body.appendChild(sF);
var colors = {track: 'snow', prog: 'Chocolate', lrc1: 'GreenYellow', lrc2: 'Chocolate'};
var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script> 打开门，去掉所有的条条框框，尽情陶醉在自然里。
祝福论坛的大朋友小朋友们节日快乐{:4_177:} 鼠标移入，首先开了门，再往里移，可以去掉框。
做个圆的，才发现移动不能沿圆环，而是仍然沿着原本的宽高往外走，已经试了，舍不得丢掉，索性让框框最后隐去了@马黑黑 {:4_173:} 在难难的回帖里看到这个动图不错，借到帖子里来了。谢谢@起个网名好难 的素材{:4_187:} 欣赏点赞一起《出去玩》的精彩制作！祝玩得开心快乐！{:4_187:} 好玩啊！鼠标移入，首先开了门，再往里移，可以去掉框。{:4_199:} 移门，隐框，显出外面精彩的世界，
影子的构思极妙，
实现手法更是妙！~~{:4_187:} 暂时的时候移门后看到的是一 张视频上的截图，呈静态。这个细节考虑的也是相当周到
所有动作的安排和设计真是巧妙又精心
影子真是代码灵活运用第一人
非常漂亮的作品。。{:4_199:} 六一节一起出去玩，
应景又活泼，
论坛里的大小朋友们节日快乐~~{:4_199:} 好巧妙的构思！ {:5_116:} 梦江南 发表于 2024-6-1 16:28
欣赏点赞一起《出去玩》的精彩制作！祝玩得开心快乐！
通常这个节日大人都带着孩子出去玩的，这么好的气候，正是游玩的好时节呢{:4_187:} 梦江南 发表于 2024-6-1 16:30
好玩啊！鼠标移入，首先开了门，再往里移，可以去掉框。
跟着黑黑的代码做的，觉得这个效果挺有趣的。谢谢梦江南鼓励{:4_187:} 南无月 发表于 2024-6-1 16:33
移门，隐框，显出外面精彩的世界，
影子的构思极妙，
实现手法更是妙！~~
想做个圆的边框，发现不是按我想的沿圆弧缩回去，只要把它们给隐了。
今天是儿童节，孩子大人出去玩的时候{:4_173:} 南无月 发表于 2024-6-1 16:39
暂时的时候移门后看到的是一 张视频上的截图，呈静态。这个细节考虑的也是相当周到
所有动作的安排和设计 ...
月儿的观察真仔细，是的，等移动到底图山个，就把它们全去掉，放视频出来了。
第一人的说法不敢当，我是瞎折腾，这个折腾的时间挺长，太不熟练了{:4_173:} 南无月 发表于 2024-6-1 16:40
六一节一起出去玩，
应景又活泼，
论坛里的大小朋友们节日快乐~~
月儿也节日快乐{:4_179:} 起个网名好难 发表于 2024-6-1 16:55
好巧妙的构思！
谢谢难难，也谢谢难难的漂亮的动图{:4_187:} 这个设计有水平 玻璃门变成了月亮门。{:4_199:} 鼠标划过，别有洞天。好创意！
特别的今天，选择了特别的歌曲。师妹用心了。{:4_187:} 马黑黑 发表于 2024-6-1 17:58
这个设计有水平
谢谢黑黑鼓励，现在对边框的理解可以更深点了{:4_187:}