学着玩玩
本帖最后由 醉美水芙蓉 于 2023-6-22 22:19 编辑 <br /><br /> <style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://pic.imgdb.cn/item/64944d761ddac507cc2f0b9a.png') no-repeat center/cover,
url('https://638183.freep.cn/638183/t23/2/xzsz.jpg') 340px 100px no-repeat,
url('https://638183.freep.cn/638183/t23/2/xzsz.jpg') 580px 10px no-repeat;
background-blend-mode: multiply, multiply;
box-shadow: 3px 3px 20px #000;
z-index: 1;
pointer-events: none;
position: relative;
--state: paused;
--delay: 0s;
}
#papa::before, #papa::after {
position: absolute;
content: '';
width: 114px;
height: 114px;
background: url('https://pic.imgdb.cn/item/649447691ddac507cc24d340.png') no-repeat center/cover;
mix-blend-mode: multiply;
pointer-events: auto;
cursor: pointer;
transform-origin: 50% 100%;
animation: dance .5s var(--delay) infinite alternate linear var(--state);
}
#papa:before {
left: 160px;
top: 520px;
}
#papa::after {
left: calc(90% - 157px);
bottom: 20px;
--delay: .25s;
}
@keyframes dance {
from { transform: skew(-5deg); }
to {transform: skew(5deg); }
}
</style>
<div id="papa">
</div>
<audio id="aud" src="https://pan.111t.net/view.php/49023ea22367ecbd60d2d852fceb3081.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
(function () {
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
竹叶包粽子,还包熊猫{:4_199:} 这是熊猫型的粽子吗?国宝级的粽子啊。{:4_173:} 好漂亮的制作啊,欣赏水芙蓉好帖{:4_187:} 马黑黑 发表于 2023-6-23 06:34
竹叶包粽子,还包熊猫
这是熊猫粽子! 红影 发表于 2023-6-23 09:02
好漂亮的制作啊,欣赏水芙蓉好帖
红影美女中午好! 醉美水芙蓉 发表于 2023-6-23 11:41
这是熊猫粽子!
哇塞,熊猫是国宝不能包粽子哦{:4_189:} 欣赏水芙蓉精彩的制作 欣赏精彩制作! 问好老师,欣赏精彩分享,点赞!{:4_204:} 小辣椒 发表于 2023-6-23 12:44
欣赏水芙蓉精彩的制作
谢谢小辣椒欣赏! 岩新新 发表于 2023-6-23 13:46
欣赏精彩制作!
谢谢岩新老师欣赏! 梦缘 发表于 2023-6-23 17:30
问好老师,欣赏精彩分享,点赞!
谢谢老师支持! 醉美水芙蓉 发表于 2023-6-23 11:41
红影美女中午好!
问好水芙蓉美女,这个帖子非常有趣{:4_187:}
页:
[1]