朵拉 发表于 2025-3-17 19:10

城北的花（学习马黑黑茉莉花效果）TO：马黑黑老师

本帖最后由 朵拉 于 2025-3-17 19:17 编辑 <br /><br /><style>
#pa {
    --state: running;
    position: relative;
    width: 1280px;
    height: 720px;
    background: rgba(0,0,0,.9) url('https://pic1.imgdb.cn/item/67d7d86888c538a9b5bfe4bf.jpg') no-repeat center/cover;
    border: thick double tan;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0,0,0,.6);
    pointer-events: none;
    margin: 30px 0 30px calc(50% - 721px);
}
#pa::after {
    position: absolute;
    content: url('https://638183.freep.cn/638183/small/dkxl.webp');
    top: 20px;
    left: 20px;
    cursor: pointer;
    pointer-events: auto;
    animation: rot 8s linear infinite var(--state);
}
.vid {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask: radial-gradient(transparent 20%, red);
    -webkit-mask: radial-gradient(transparent 20%, red);
    pointer-events: none;
    border-radius: inherit;
}
@keyframes rot {
    to { transform: rotate(1turn); }
}
</style>

<div id="pa">
    <audio id="aud" src="https://cccimg.com/view.php/206e500e09a535f1b0387f76ec04df98.mp3" autoplay="" loop=""></audio>
   
    <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/01/19/07/video6363f80b6cb6d.mp4" muted autoplay loop></video>
</div>

<script>
var pa = document.querySelector('#pa');
var aud = document.querySelector('audio');
var vid = document.querySelector('.vid');
var ww = pa.offsetWidth, hh = pa.offsetHeight;
var scale = (pa, width) => {
    var vw = window.innerWidth || document.documentElement.clientWidth,
      vh = window.innerHeight || document.documentElement.clientHeight;
    var val = vw < width ? (Math.min(vw/ww, vh/hh)) * 0.95 : 1;
    pa.style.setProperty('transform', `scale(${val})`);
};
var mState = () => {
    pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    aud.paused ? vid.pause() : vid.play();
};
aud.onplaying = aud.onpause = () => mState();
pa.onclick = () => aud.paused ? aud.play() : aud.pause();
window.onresize = () => scale(pa, ww);
scale(pa,ww);
</script>

朵拉 发表于 2025-3-17 19:15

@马黑黑
感谢老师创作出适配小设备的代码，
遥祝您新周愉快，工作愉快{:4_204:}{:4_190:}

红影 发表于 2025-3-17 19:30

这个视频也是黑黑原来帖子的呢。欣赏朵宝好帖{:4_187:}

马黑黑 发表于 2025-3-17 19:35

朵拉 发表于 2025-3-17 19:15
@马黑黑
感谢老师创作出适配小设备的代码，
遥祝您新周愉快，工作愉快

{:4_191:}

马黑黑 发表于 2025-3-17 19:37

很漂亮

#pa { ... } 加入 z-index: 1; 可以保证帖子UI不会被右侧的导航按钮遮挡

红影 发表于 2025-3-17 21:07

这图图好像是风入画送花落的一张，朵宝也在那边玩啊{:4_173:}

小辣椒 发表于 2025-3-17 22:32

哇塞，这个男的口上含着一朵花{:4_189:}

小辣椒 发表于 2025-3-17 22:34

黑黑茉莉花效果我都不知道什么效果，先去看看黑黑的再回过来欣赏

小辣椒 发表于 2025-3-17 22:50

欣赏朵拉的精彩制作{:4_199:}

梦江南 发表于 2025-3-18 07:55

欣赏老师的音画佳作。{:4_199:}
页: [1]
查看完整版本: 城北的花（学习马黑黑茉莉花效果）TO：马黑黑老师