【凡哥教程第二十讲作业】视频色相转换程序（CSS filter滤镜）

花简静 · 发表于 2024-8-9 10:10

本帖最后由花简静于 2024-8-9 14:18 编辑

filter: hue-rotate(0deg);

花简静 · 发表于 2024-8-9 10:12

本帖最后由花简静于 2024-8-9 14:23 编辑

凡哥教程第二十讲作业：参照示例六色相转换滤镜的代码做一个可以调节视频色相并显示当前滤镜值的程序。提示：使用video标签播放视频，在CSS代码中设置一个视频id选择器并设置好宽高尺寸、filter属性（0deg）， video标签的HTML代码里设置好id、自动播放、重复播放， output标签和input标签可以照抄示例代码但应更改对应的id并在JS代码中使用相同的id。

@凡哥老师来瞧一眼今天作业，是不是酱紫滴

说明：一楼和三楼为老师批改过后的效果和代码。

第一稿作业代码在【新提醒】花简静贴子代码及说明汇总（翻页有新贴） - 第88页 - 传图试帖 - 千山论坛 - Powered by Discuz! (qslt.net)874楼

有需要的童鞋可自行对比

花简静 · 发表于 2024-8-9 10:12

本帖最后由花简静于 2024-8-9 14:19 编辑

<style>

#vid {

width: 400px;

height: 400px;

object-fit: cover;

filter: hue-rotate(0deg);

border-radius: 50%;

}

</style>

<p><output id="msg">filter: hue-rotate(0deg);</output></p>

range.oninput = () => {

msg.value = 'filter: hue-rotate(' + range.value + 'deg);';

vid.style.filter = 'hue-rotate(' + range.value + 'deg)';

};

</script>

清梦 · 发表于 2024-8-9 10:14

静静真漂亮的作业

清梦 · 发表于 2024-8-9 10:15

谢谢静静的精彩分享，这个我要认真学习

清梦 · 发表于 2024-8-9 10:15

问好静静谢谢你的精彩分享

清梦 · 发表于 2024-8-9 10:16

祝静静学习愉快，周末快乐

花简静 · 发表于 2024-8-9 10:16

本帖最后由花简静于 2024-8-9 14:24 编辑

<style>

#qsfg20 {

margin: 130px 0 30px calc(50% - 391px);

position: relative;

margin: auto;

width:680px;

height: 420px;

background: translate;

overflow: hidden;

}

#vid {

position: absolute;

width: 100%;

height: 100%;

opacity: .99;

object-fit: cover;

top:00px;

filter: hue-rotate(0deg);

border-radius: 50%;

}

</style>

</video>hue-rotate滤镜

</div>

<p class="textMid"><output id="og6">filter: hue-rotate(0deg);</output></p>

fg6.oninput = () => {

og6.value = 'filter: hue-rotate(' + fg6.value + 'deg);';

qsfg20.style.filter = 'hue-rotate(' + fg6.value + 'deg)';

};

</script>

花简静 · 发表于 2024-8-9 10:16

清梦发表于 2024-8-9 10:15
谢谢静静的精彩分享，这个我要认真学习

套用就可以

花简静 · 发表于 2024-8-9 10:17

清梦发表于 2024-8-9 10:16
祝静静学习愉快，周末快乐

清梦一起开心哈

[活动] 【凡哥教程第二十讲作业】视频色相转换程序（CSS filter滤镜）

评分

评分

评分

评分