技能GET-使用CSS3渐变实现单一元素多颜色展示

时间：2022-03-14 19:00:34

发现一个比较好玩的东东，CSS3渐变，基本介绍和使用方式详见http://www.runoob.com/css3/css3-gradients.html。
原本是实现颜色的过渡效果，已替代图片的使用，但是配置合理的颜色参数，便可以实现单一元素的多颜色展示，上代码。

Demo1 简单的例子

html
<body>
    <div class="demo"></div>
</body>
css
.demo {
        height: 300px;
        width: 300px;
        margin: 0 auto;
        border: 1px solid black;
        background: linear-gradient(red, red 10%, blue 10%, blue);//注意中间red和blue后面的值
    }

实现效果图
技能GET-使用CSS3渐变实现单一元素多颜色展示

Demo2 hover效果

html
<body><div id="demoPanel" class="demo"></div></body>

css
.demo {
        height: 400px;
        width: 400px;
        margin: 0 auto;
        border: 1px solid black;
    }
.li-1 { background: linear-gradient(red, red 25%, white 25%, white);}
.li-2 { background: linear-gradient(white, white 25%, red 25%, red 50%, white 50%, white);}
.li-3 { background: linear-gradient(white, white 50%, red 50%, red 75%, white 75%, white);}
.li-4 { background: linear-gradient(white, white 75%, red 75%, red);}

js
(function() {
var _demoPanel = document.getElementById('demoPanel');
    _demoPanel.addEventListener('mousemove', function(event) {
        _demoPanel.className = 'demo li-' + (Math.ceil(event.offsetY / 100));
    });
    _demoPanel.addEventListener('mouseout', function(event) {
        _demoPanel.className = 'demo';
    });
})()

执行效果可自行尝试，在hover到对应颜色时改变css样式，得到不同的效果，如下hover在第三行的效果图2。
技能GET-使用CSS3渐变实现单一元素多颜色展示

总结：在线性渐变样式的属性中，在两个渐变终端颜色中（white，red），添加前端颜色的截断颜色，并设置比例（white，white 25%，red），使其渐变距离为零，从而达到取消渐变的效果。比较简单，欢迎板砖~~~

标签：

相关文章