|
|

楼主 |
发表于 2023-6-28 13:14
|
显示全部楼层
代码
- <style>
- #mydiv {
- margin: 30px auto;
- padding: 20px 10px;
- width: 90%;
- min-height: 400px;
- border: 1px solid var(--fColor);
- color: var(--fColor);
- background: var(--bgMain);
- position: relative;
- pointer-events: none;
- --bgMain: linear-gradient(snow,lightgreen,snow);
- --bgTitle: lightgreen;
- --fColor: black;
- --btnWidth: 40px;
- --state: paused;
- }
- #mydiv::before, #mydiv::after { position: absolute; content: ''; }
- #mydiv::before {
- padding: 0 20px;
- content: '帖子标题';
- left: 15px;
- top: -18px;
- font: bold 24px / 36px sans-serif;
- text-shadow: 1px 1px 2px #111;
- border: inherit;
- background: var(--bgTitle);
- }
- #mydiv::after {
- width: var(--btnWidth);
- height: var(--btnWidth);
- background: conic-gradient(var(--fColor),var(--bgTitle),var(--fColor),var(--bgTitle));
- border-radius: 50%;
- bottom: calc(var(--btnWidth) / -2);
- left: calc(50% - var(--btnWidth) / 2);
- cursor: pointer;
- pointer-events: auto;
- animation: rot 5s infinite linear var(--state);
- }
- #mydiv p { padding: 10px 0; font-size: 16px; }
- .txtRight { position: absolute; text-align: center; right: 10px; bottom: -10px; }
- .txtMid { text-align: center; }
- @keyframes rot { to { transform: rotate(360deg); } }
- </style>
- <div id="mydiv">
- <p>段落一</p>
- <p class="txtMid"><img src="https://638183.freep.cn/638183/2-0.gif" alt="" /></p>
- <p>段落二</p>
- <p class="txtRight">资料/网络<br>2023年6月27日</p>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214980" autoplay="autoplay" loop="loop"></audio>
- <script>
- (function () {
- 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>
复制代码
|
评分
-
| 参与人数 2 | 威望 +100 |
金钱 +200 |
经验 +100 |
收起
理由
|
樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|