RGB模型(html+css)

最新推荐文章于 2024-04-30 11:17:59 发布

置顶 ICY___

最新推荐文章于 2024-04-30 11:17:59 发布

阅读量446

点赞数 1

本文链接：https://blog.csdn.net/ICY___/article/details/104689731

版权

HTML & CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这是老师布置的一个作业，本来是要用matlab实现rgb的模型的，奈何电脑中全是学习资源，matlab又太过庞大，所以早就卸载了，老师说可以用其他的方法去实现rgb模型，我想了想，没想出来......

先看看实现的效果：

实现代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input id="btn1" value='#ff0000' onchange="give1()" type="color">
    <input id="btn2" value='#00ff00' onchange="give2()" type="color">
    <input id="btn3" value='#0000ff' onchange="give3()" type="color">

    <div class="color1" style="position: relative;left: 300px; width: 200px;height: 200px;border-radius: 50%;background-color:rgb(255, 0, 0)">
        <div class="color2" style="position: absolute;top: 50%;left: -25%; width: 200px;height: 200px;border-radius: 50%; background-color:rgb(0, 255, 0);mix-blend-mode: screen;">
            <div class="color3" style="position: absolute;top: 0%;left: 50%; width: 200px;height: 200px;border-radius: 50%; background-color:rgb(0, 0, 255);mix-blend-mode: screen;"></div>
        </div>
    </div>
    <script>
        let btn1=document.getElementById('btn1');
        let btn2=document.getElementById('btn2');
        let btn3=document.getElementById('btn3');
        let color1=document.getElementsByClassName('color1')[0];
        let color2=document.getElementsByClassName('color2')[0];
        let color3=document.getElementsByClassName('color3')[0];
        let give1=()=>{
            console.log(btn1.value);
            color1.style.backgroundColor=btn1.value;
        }
        let give2=()=>{
            // console.log(btn1.value);
            color2.style.backgroundColor=btn2.value;
        }
        let give3=()=>{
            // console.log(btn1.value);
            color3.style.backgroundColor=btn3.value;
        }
    </script>
</body>

</html>

关于mix-blend-mode的使用，请移步https://www.jianshu.com/p/7a6fe5d29252

兼容性：兼容谷歌火狐不兼容ie 和 Microsoft Eage

ICY___

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
RGB模型(html+css)

这是老师布置的一个作业，本来是要用matlab实现rgb的模型的，奈何电脑中全是学习资源，matlab又太过庞大，所以早就卸载了，老师说可以用其他的方法去实现rgb模型，我想了想，没想出来......先看看实现的效果：实现代码：<!DOCTYPE html><html lang="en"><head> <meta ch...
复制链接

扫一扫