CSS registerProperty渐变背景的transition过渡效果实例页面

回到相关文章 »

效果：

代码：

CSS代码：

.box {
    max-width: 400px; height: 200px;
    --start-stop: olive;
    --end-stop: green;
    background: linear-gradient(to right, var(--start-stop), var(--end-stop));
    transition: --start-stop .5s, --end-stop .5s;
}
.box:hover {
    --start-stop: green;
    --end-stop: purple;
}

HTML代码：

<div class="box"></div>

JS代码：

if (window.CSS) {
    CSS.registerProperty({
        name: '--start-stop',
        syntax: '<color>',
        inherits: false,
        initialValue: 'transparent'
    });
    CSS.registerProperty({
        name: '--end-stop',
        syntax: '<color>',
        inherits: false,
        initialValue: 'transparent'
    });
}