【谢师宴之三】感谢马黑黑——梦幻之门（黑师无人区水中花效果）
<style>#papa {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
border: 2px solid tan;
border-image: linear-gradient(to left,tan,red,green) 2;
background: url('https://pic.imgdb.cn/item/6428fb97a682492fcce4a9e7.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mama { left: 100px; width: 900px; height: 200px; }
.text{ font-size: 64px; font-weight: bold; fill: none; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; }
.text-1{ stroke: #3498db; text-shadow: 0 0 5px #3498db; animation-delay: -1.5s; }
.text-2{ stroke: #f39c12; text-shadow: 0 0 5px #f39c12; animation-delay: -3s; }
.text-3{ stroke: #e74c3c; text-shadow: 0 0 5px #e74c3c; animation-delay: -4.5s; }
.text-4{ stroke: #9b59b6; text-shadow: 0 0 5px #9b59b6; animation-delay: -6s; }
#mplayer{
position: absolute;
left: 31%;
bottom: 220px;
width: 258px;
height: 258px;
border: 10px solid Gold;
border-radius: 50%;
display: grid;
place-items: center;
filter:url(#wavy) blur(0.5px);
transform: rotateX(-15deg);
pointer-events: none;
--state: running;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
width: 200px;
height: 200px;
background: url('https://pic.imgdb.cn/item/6428faf8a682492fcce3cc9f.png') center/cover no-repeat;
cursor: pointer;
pointer-events: auto;
animation: rot 8s infinite linear var(--state);
}
#mplayer::after { width: 100px; height: 100px; bottom: 4px; }
@keyframes stroke { to { stroke-dashoffset: -400; } }
@keyframes rot { to { transform: rotate(360deg); } }</style><div id="papa"> <div id="mplayer"></div> <svg id="svg" width="0" height="0"> <g><filter id="wavy"> <feturbulence x="0" y="0" basefrequency="0.02" numoctaves="5" seed="2"> <animate attributename="baseFrequency" dur="60s" values="0.02;0.05;0.02" repeatcount="indefinite"></animate> </feturbulence> <fedisplacementmap in="SourceGraphic" scale="30"></fedisplacementmap> </filter></g> </svg><div id="mama"> <svg width="100%" height="100%" style="border: 0px solid"> <text text-anchor="middle" x="50%" y="50%" class="text text-1">梦幻之门</text> <text text-anchor="middle" x="50%" y="50%" class="text text-2">梦幻之门</text> <text text-anchor="middle" x="50%" y="50%" class="text text-3">梦幻之门</text> <text text-anchor="middle" x="50%" y="50%" class="text text-4">梦幻之门</text> </svg></div> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1886920506" loop="loop" autoplay="autoplay"></audio></div><script>let mState = () => aud.paused ? (mplayer.style.setProperty('--state','paused'), svg.pauseAnimations()) : (mplayer.style.setProperty('--state','running'), svg.unpauseAnimations());//mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play',mState,false);
aud.addEventListener('pause',mState,false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());</script>
@马黑黑 {:4_170:}送美人儿一个 欣赏悄然的精彩制作{:4_171:} 这朵花很艳丽，配美人，黑黑肯定喜欢{:4_189:} 作业完成的非常漂亮{:4_199:} 雨中悄然 发表于 2023-4-2 15:56
@马黑黑 送美人儿一个
不是双面间谍吧{:4_203:} 小辣椒 发表于 2023-4-2 16:08
这朵花很艳丽，配美人，黑黑肯定喜欢
你又啥都知道{:4_170:} 马黑黑 发表于 2023-4-2 16:10
你又啥都知道
黑黑喜欢美人儿{:4_170:} 小辣椒 发表于 2023-4-2 16:11
黑黑喜欢美人儿
正常正常 马黑黑 发表于 2023-4-2 16:12
正常正常
就是的，和岁月说的男人都喜欢美臀一样的话{:4_170:} 连俺等俗人都看出来，用桃花做梦幻之门，预示里面艳遇，马老师冲快快冲进去{:4_170:} 小辣椒 发表于 2023-4-2 16:24
就是的，和岁月说的男人都喜欢美臀一样的话
俺可木有说的辣么具体哈{:4_170:} 不亏是黑黑老师的高徒，制作播放器快速漂亮！{:4_187:} 马黑黑 发表于 2023-4-2 16:10
不是双面间谍吧
{:4_170:}是滴，小心你的机密 小辣椒 发表于 2023-4-2 16:07
欣赏悄然的精彩制作
{:4_170:}辣椒这个是 新的效果 雨中悄然 发表于 2023-4-2 19:17
是滴，小心你的机密
俺机密太多，尤其是兜里有六毛钱 小辣椒 发表于 2023-4-2 16:08
这朵花很艳丽，配美人，黑黑肯定喜欢
美人儿么，照着喜欢送的{:4_170:} 小辣椒 发表于 2023-4-2 16:09
作业完成的非常漂亮
人儿美的缘故 马黑黑 发表于 2023-4-2 19:25
俺机密太多，尤其是兜里有六毛钱
{:4_170:}需要专人间谍 很梦幻的想像，不错，欣赏问好！{:4_204:}