相关疑难解决方法(0)

如何使用jQuery和CSS在底层使用精确位置获取DIV的背景

我正在寻找一个页面,其背景渐变每隔几秒就会改变颜色,并在转换之间进行混合.现在我想将此效果应用于由具有纯色背景的元素阻挡的上部元素.

为了给你一个更好的例子我的意思是我附上了一个简单的模型,希望你理解我正在尝试做什么,我愿意接受建议.

Jquery和CSS

问题显然是包含黑色背景的块,任何PNG透明使用的黑色背景都会看到黑色而不是渐变.

到目前为止,我将包含示例代码:

<body><!-- A Jquery script will be used to add CSS background, Easy stuff -->
<div class="blackbox">
    <div class="logo"><img src="#" alt=""></div>
    <hr class="h-line">
    <div class="v-line"> </div>
</div>

Run Code Online (Sandbox Code Playgroud)

所以我要追求的是:

一种已知的jQuery方法来获取背景图像,但它需要能够引用渐变的位置,使其与背景内联.
一个更好的解决方案让这个工作,请记住页面需要响应,所以我可以使用其他方法,但因为它的响应我不能想到任何.

html javascript css jquery html5

Sim*_*ter

2017 02-08

14
推荐指数

1
解决办法

1587
查看次数

使用LESS CSS在CSS关键帧中使用@符号和变量

我需要8种不同的CSS3动画,这些动画太相似了,所以我使用了LESS.下面是代码,它完美地运行,带有一个小故障 - @name变量.

.animation_top (@name, @pxFrom, @pxTo) {
    @-moz-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }

    @-webkit-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }

    @-ms-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

因为css关键帧是由@符号启动的,所以LESS只是忽略@name的变量.有没有办法如何逃脱关键帧@符号或迫使LESS以某种方式正确渲染@name？

css escaping mixins less css-animations

dck*_*dck

2012 11-08

10
推荐指数

3
解决办法

7368
查看次数

所有浏览器的CSS关键帧动画？

我有一个摇摆动画,我想在所有(现代)浏览器上工作.我有正确的CSS吗？

此外,其他浏览器相当于:-webkit-transform-origin:top;

还有,有没有更简单的方法来写出来,似乎很多代码？我少用.

.bow{   
    -webkit-animation: swing 3s infinite ease-in-out;
    -moz-animation:    swing 3s infinite ease-in-out;
    -o-animation:      swing 3s infinite ease-in-out;
    -ms-transition:    swing 3s infinite ease-in-out; 
    animation:         swing 3s infinite ease-in-out;
}

@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}

@-o-keyframes swing {
    0%{-o-transform:rotate(-3deg)}
    50%{-o-transform:rotate(3deg)}
    100%{-o-transform:rotate(-3deg)}
}

@-ms-keyframes swing {
    0%{-ms-transform:rotate(-3deg)}
    50%{-ms-transform:rotate(3deg)}
    100%{-ms-transform:rotate(-3deg)}
}

@keyframes swing {
    0%{transform:rotate(-3deg)}
    50%{transform:rotate(3deg)}
    100%{transform:rotate(-3deg)}
}

Run Code Online (Sandbox Code Playgroud)

css css3 less

pan*_*hro

2013 12-12

2
推荐指数

1
解决办法

5980
查看次数

使用LESS CSS生成动态前缀关键帧

我目前正试图找到一种方法来生成带有Less的前缀关键帧.

这是生成前缀版本的循环,它可以工作.唯一的问题是,当我from{} to{}在dostuff动画中添加一个声明时,它会破坏它并导致Less像混合一样对待它们.有没有办法让这个工作？

@key-prefix: ~"@-webkit-",~"@-o-",~"@-moz-",~"@";
.generate-keyframes(@i) when (@i > 0) {
    .load1-keyframes((@i - 1));
    @prefix: extract(@key-prefix,@i);
    @{prefix}keyframes dostuff {

    }
}
.generate-keyframes(4);

Run Code Online (Sandbox Code Playgroud)

css less

Luk*_*aas

2014 05-05

1
推荐指数

1
解决办法

370
查看次数