Question

有一些css属性只能（据我所知）被修改为一组值，例如 text-shadow （text-shadow:<xOffset> <yOffset> <radius> <color>;）。我已经看到一些被称为速记值，即使我从未见过较长的语法版本。

因此，简而言之，我想在Fx.Morph转换中修改声明的各个部分，如下面的示例代码，而不是诉诸特定于转换的黑客攻击：

text-shadow:1px 1px 2px rgba(0,0,0,0.5)

假设我需要淡出阴影。我怎么做到这一点？

Answer 1

Element.Styles.textShadow = "rgb(@, @, @) @px @px @px";

然后就像this.tween('text-shadow', '#000 10px 10px 30px');一样使用 - 但你需要先定义基础阴影VIA MOOTOOLS。这似乎有效：http://jsfiddle.net/dimitar/6UADQ/10/

Element.Styles.textShadow = "@px @px @px rgb(@, @, @)";

document.id("moo").set("tween", {
    duration: 600,
    link: "cancel"
}).setStyle("text-shadow", "5px 5px 5px #000").addEvents({
    mouseenter: function() {
        this.store("shadow", this.getStyle("text-shadow"));
        this.tween('text-shadow', '10px 10px 30px rgb(0,0,0) ');
    },
    mouseleave: function() {
       this.tween('text-shadow', this.retrieve("shadow"));
    }
});

如何使用Mootools Fx变换多部分css属性？

1 个答案: