《道教》（学习黑黑的代码效果）
<style>
#papa {
margin: 70px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://pic.imgdb.cn/item/65cb5b929f345e8d032a5b9b.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000; border-radius: 8px;
position: relative;
overflow: hidden;
z-index: 1;
}
#mplayer {
position: absolute;
top: 60px;
right: 200px;
width: 320px;
height: 320px;
border-radius: 40% 60%;
background: url('https://638183.freep.cn/638183/t24/jpg/g54.jpg') no-repeat center/cover;
transform-origin: 50%;
mix-blend-mode: creen;
animation: borderSize 2.6s linear infinite alternate var(--state);
cursor: pointer;
}
.vid { position: absolute; top: -60px; width: 1024px; height: 700px; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@keyframes borderSize {
from { border-radius: 40% 60%; transform: scale(1.0);}
to { border-radius: 60% 40%; transform: scale(1.2); }
}
</style>
<div id="papa">
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec495391393a_10s_big.mp4" loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2122857718" autoplay loop></audio>
<div id="mplayer"></div>
</div>
<script>
var vids = document.querySelectorAll('.vid');
var vidplay = (play) => vids.forEach(vid => play ? vid.play() : vid.pause());
var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'),vidplay(false)) : (papa.style.setProperty('--state', 'running'),vidplay(true));
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
看到黑黑讲解的文字环绕那个帖子，觉得下面那张半径30% 60%的图形好玩，就试试看看修改半径做动态，倒也能做成呢{:4_173:} 去找修炼的曲子，发现这首音乐本身就叫这个名，挺有意思，就用了{:4_173:} 代码套用了黑黑的《The Box》，只是不是让边框变化，而是选了别的变化一下看看。
谢谢黑黑代码@马黑黑 {:4_187:} 湖上修炼，道法自然。妙哉 马黑黑 发表于 2024-2-13 22:13
湖上修炼，道法自然。妙哉
谢谢黑黑，我怎么觉得下面是云海啊{:4_173:} 红影 发表于 2024-2-13 22:21
谢谢黑黑，我怎么觉得下面是云海啊
云海之下，必有湖泊 白云深处，云水禅心，此处修行，功力速进。{:4_189:} 这支乐曲宁静祥和，是道教音乐吗？ 马黑黑 发表于 2024-2-13 23:33
云海之下，必有湖泊
有水必有财，今天初五，迎接财神爷进门的日子。祝大家财源广进{:4_177:} 樵歌 发表于 2024-2-14 07:38
白云深处，云水禅心，此处修行，功力速进。
那个修炼的图图还是黑黑的，我借用一下{:4_173:} 醉美水芙蓉 发表于 2024-2-14 08:52
红影美女厉害！图片扭动好玩！
这个不是扭动的，是用border-radius的变化，获取不同的原图片区域呢。
谢谢水芙蓉美女临帖鼓励{:4_187:} 梦油 发表于 2024-2-14 10:32
这支乐曲宁静祥和，是道教音乐吗？
是啊，我搜的关键词就是道教音乐，结果找到这个{:4_173:} 红影 发表于 2024-2-14 10:49
有水必有财，今天初五，迎接财神爷进门的日子。祝大家财源广进
谢谢 红影 发表于 2024-2-14 10:51
是啊，我搜的关键词就是道教音乐，结果找到这个
汉武帝之后，中国哲学的翘楚道开始走向没落，现在沦为搞封建迷信获得的精神力量。 红影 发表于 2024-2-14 10:51
是啊，我搜的关键词就是道教音乐，结果找到这个
听着真舒服。 马黑黑 发表于 2024-2-14 11:11
谢谢
不客气，恭喜发大财{:4_177:} 马黑黑 发表于 2024-2-14 11:12
汉武帝之后，中国哲学的翘楚道开始走向没落，现在沦为搞封建迷信获得的精神力量。
外来的和尚会念经，把咱自己的东西废了，迎来了外来的。 梦油 发表于 2024-2-14 15:14
听着真舒服。
谢谢梦油，我也挺喜欢这个，就是有点短{:4_173:}