|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
单标签帖子,没啥技术含量:
- <style>
- #mydiv {
- margin: -80px 0 0 calc(50% - 593px);
- width: 1024px;
- height: 640px;
- background: url('https://638183.freep.cn/638183/t23/webp1/t3.webp') no-repeat center/cover;
- overflow: hidden;
- position: relative;
- --state: paused;
- }
- #mydiv::before, #mydiv::after {
- position: absolute;
- content: '';
- width: 100px;
- height: 88px;
- background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
- offset-path: path('M0 60 Q500 200,1024 60');
- offset-distance: 0%;
- animation: move 10s infinite linear var(--state);
- cursor: pointer;
- }
- #mydiv::after {
- offset-path: path('M0 600 Q500 400,1024 600');
- transform: scale(1,-1);
- filter: blur(1px);
- }
- @keyframes move { to { offset-distance: 100%; } }
- </style>
- <div id="mydiv"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=19282209" autoplay loop></audio>
- <script>
- let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
评分
-
| 参与人数 4 | 威望 +140 |
金钱 +280 |
经验 +140 |
收起
理由
|
雨中悄然
| + 30 |
+ 60 |
+ 30 |
赞一个! |
醉美水芙蓉
| + 30 |
+ 60 |
+ 30 |
赞一个! |
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|