查看: 882|回复: 55

[活动] 【凡哥教程第二十六讲作业】古风美人儿(学一点点JS(六)JS操作CSS变量)

[复制链接]
发表于 2024-8-27 18:43 | 显示全部楼层 |阅读模式
本帖最后由 雨声 于 2024-8-27 21:04 编辑

评分

8

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-27 18:46 | 显示全部楼层
凡哥教程第二十六讲作业:
参照本讲最后一个示例,制作一个简单的帖子。
要求:
① 帖子有背景图、有视频,其中视频设置为圆形、不覆盖整个帖子;
② 用伪元素 ::before 和 ::after 做两个音频播放控制器,各自有自己的背景图案,点击任意一个都可以联动控制音乐、CSS动画和视频。


<style> #qsfg26 {     --state: running;     margin: 130px 0 30px calc(50% - 931px);     width: 1700px;     height: 900px;     background:url('https://pic.imgdb.cn/item/66cda37bd9c307b7e9fa69ab.webp') no-repeat center/cover;     border: 1px solid gray;     pointer-events: none;     position: relative;     overflow: hidden;    } #qsfg26::before, #qsfg26::after { position: absolute; content: ''; }   #qsfg26::before {     right: 230px;     bottom: 330px;     width: 90px;     height: 90px;     background: url('https://638183.freep.cn/638183/small/hxxb.png') no-repeat center/cover;     cursor: pointer;     pointer-events: auto;     animation: rot 6s linear infinite var(--state); } #qsfg26::after {     right: 560px;     bottom: 590px;     width: 60px;     height: 60px;     background: url('https://638183.freep.cn/638183/small/hxxb.png') no-repeat center/cover;     cursor: pointer;     pointer-events: auto;     animation: rot 6s linear infinite var(--state); } @keyframes rot { to { transform: rotate(360deg); } }   #vid {     position: absolute;     width: 700px;     height: 700px;     object-fit: cover;     opacity: .69;     bottom:220px;     left:100px;     border-radius: 50%;     mix-blend-mode: screen;     -webkit-mask: radial-gradient(circle, silver, lightgreen, cyan 50%, transparent 60%,transparent,transparent); } </style>   <div id="qsfg26" title="播放/暂停">     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=32743519" autoplay loop></audio>     <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/90/5b4d67697ecab.mp4" autoplay loop muted></video> </div>   <script> mState = () => {     qsfg26.style.setProperty('--state', aud.paused ? 'paused' : 'running');     qsfg26.title = ['暂停','播放'][+aud.paused];     aud.paused ? vid.pause() : vid.play(); }; aud.oncanplay = aud.onplaying = aud.onpause = () => mState(); qsfg26.onclick = () => aud.paused ? aud.play() : aud.pause(); </script>

评分

4

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-27 18:48 | 显示全部楼层
@凡哥
老师来瞧一瞧,交一份26讲的作业。。。
其实代码老师都给啦。。。用抄的。。。

辛苦老师看看这么整符不符合要求
点评
回复

使用道具

发表于 2024-8-27 19:59 | 显示全部楼层
花简静 发表于 2024-8-27 18:48
@凡哥
老师来瞧一瞧,交一份26讲的作业。。。
其实代码老师都给啦。。。用抄的。。。

完美
100√
点评
回复

使用道具

发表于 2024-8-27 20:18 | 显示全部楼层
欣赏简静作业,十分完美,赞。
点评
回复

使用道具

 楼主| 发表于 2024-8-27 20:41 | 显示全部楼层

这个小花好看,我整的那朵就进不来,它是组合的。我还得想想去

评分

1

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-27 20:42 | 显示全部楼层
狂飙 发表于 2024-8-27 20:18
欣赏简静作业,十分完美,赞。

感谢狂帅支持
点评
回复

使用道具

发表于 2024-8-27 21:04 | 显示全部楼层
花花 这图做得漂亮!
点评
回复

使用道具

发表于 2024-8-27 21:07 | 显示全部楼层
静宝的作业不用看就是完美
点评
回复

使用道具

发表于 2024-8-27 21:07 | 显示全部楼层
欣赏静静带来的精彩作业。。。
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-9 21:35

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表