|
|

楼主 |
发表于 2024-4-6 18:33
|
显示全部楼层
帖子代码
- <style>
- #mydiv {
- margin: 20px 0 20px calc(50% - 721px);
- width: 1280px;
- height: 800px;
- background: lightblue;
- box-shadow: 4px 4px 8px #000;
- overflow: hidden;
- z-index: 1;
- position: relative;
- --begin1: 0px;
- --begin2: -1280px;
- }
- #mydiv::before , #mydiv::after {
- position: absolute;
- content: '';
- inset: 0;
- background: url('https://638183.freep.cn/638183/t24/1/prologue.jpg') no-repeat;
- z-index: -2;
- }
- #mydiv::before {
- background-position: var(--begin1) 0;
- }
- #mydiv::after {
- transform: scale(-1, 1);
- background-position: var(--begin2) 0;
- }
- #play {
- position: absolute;
- left: calc(50% - 50px);
- top: 20px;
- width: 100px;
- cursor: pointer;
- animation: rotating 5s linear infinite var(--state);
- }
- #vid {
- position: absolute;
- right: 0;
- width: 40%;
- height: 30%;
- object-fit: cover;
- mix-blend-mode: screen;
- transform: rotate(-15deg);
- pointer-events: none;
- }
- @keyframes rotating { to { transform: rotate(360deg); } }
- </style>
- <div id="mydiv">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2923186" autoplay></audio>
- <video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/19/81/5f154503b457d.mp4" muted loop></video>
- <img id="play" src="https://638183.freep.cn/638183/small/4yc.png" alt="" />
- </div>
- <script>
- var ww = mydiv.offsetWidth;
- var step = 0.5, begin1 = 0, raf = null;
- aud.loo = false;
- play.onclick = () => aud.paused ? aud.play() : aud.pause();
- aud.onpause = aud.onplaying = () => mState();
- aud.onended = () => { aud.play(); cancelAnimationFrame(raf); }
- aud.onseeked = () => cancelAnimationFrame(raf);
- var moving = () => {
- begin1 += step;
- if(begin1 >= ww) begin1 = -ww;
- begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : begin2 = -1 * (begin1 + ww - 1);
- mydiv.style.setProperty('--begin1', begin1 + 'px');
- mydiv.style.setProperty('--begin2', begin2 + 'px');
- aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);
- };
- var mState = () => {
- aud.paused
- ? (mydiv.style.setProperty('--state', 'paused'), cancelAnimationFrame(raf), vid.pause())
- : (mydiv.style.setProperty('--state', 'running'), raf = requestAnimationFrame(moving), vid.play());
- };
- </script>
复制代码
|
评分
-
| 参与人数 2 | 威望 +100 |
金钱 +200 |
经验 +100 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|