相关疑难解决方法(0)

通过向上滑动动画转换背景颜色

我试图通过使用CSS转换来改变悬停元素的背景颜色.我想通过从底部向上滚动来做到这一点.我可以淡化使用它的背景,但我希望它向上滑动:

-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;

Run Code Online (Sandbox Code Playgroud)

另外一个想法是,在应用背景的情况下向上滚动一个单独的元素会更好吗？

css css3 css-transitions

Dav*_*nes

2018 02-11

21
推荐指数

2
解决办法

4万
查看次数

如何制作火花按钮动画？

我刚刚发现了一个GitHub Repo,其上有一个很酷的引发动画button,但对于Android.

这是Animation:

但是,我希望我的网站,所以我开始自己设计.

首先,我按帧拆掉了gif.然后,通过这些观点,我制作了一个路线图,这是我在编写代码时所遵循的:

这颗星逐渐scale()消失了.
一小圈橙色逐渐覆盖了恒星scale().
另一个小圆圈,但这次background-color(白色,在这种情况下),也逐渐覆盖前一个圆圈scale().
随之scale()而来的是星星也会再次出现(因此,我要增加z-index),这次是橙色(表示其选定的状态).
新星的四周散落着另一个小圆圈.

这是我到目前为止所做的:

svg {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100px;
  transition: 0.5s;
  fill:gray;
}

svg:hover {
  animation: up-svg 1s;
  fill: darkorange;
  z-index: 1;
}

svg:hover~.svg {
  animation: up-one 0.5s;
  display: block;
}

svg:hover~.svg1 {
  animation: up-two 1s;
  display: block;
}

.svg {
  position: absolute;
  top: 0; …

Run Code Online (Sandbox Code Playgroud)

javascript css css-animations

Zly*_*rin

2019 08-14

11
推荐指数

1
解决办法

620
查看次数

获取使用 calc 等表达式的 CSS 变量的计算值

在 JavaScript 中，您可以使用 .css 获取 CSS 变量的值getPropertyValue(property)。此函数可用于检索:root块中声明的变量。

:root {
    --example-var: 50px;
}

Run Code Online (Sandbox Code Playgroud)

但是，如果此变量表达式包含类似的函数calc，则该getPropertyValue调用将表达式作为文本返回而不是计算它，即使使用getComputedStyle.

:root {
    --example-var: calc(100px - 5px);
}

Run Code Online (Sandbox Code Playgroud)

如何获取使用 CSS 函数的 CSS 变量的计算值calc？

请参阅下面的示例：

:root {
    --example-var: 50px;
}

Run Code Online (Sandbox Code Playgroud)

:root {
    --example-var: calc(100px - 5px);
}

Run Code Online (Sandbox Code Playgroud)

let div = document.getElementById('example');
console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))

Run Code Online (Sandbox Code Playgroud)

javascript css css-variables

FTh*_*son

lucky-day

11
推荐指数

2
解决办法

3691
查看次数

透明的儿童div可能吗？

图像是祖父母div,黑色半透明叠加是父div,裁剪部分是子div.用户将看到祖父母图像和父叠加,然后他可以使用子裁剪器div裁剪它.我试过并失败了opacity和rgba背景.

这些疯狂的方法似乎对我有用 -

在子div的背景中设置祖父母图像,然后更改x/ y的background-position.
将孩子和父母组合成一个单独的div,并rgba border用作叠加(我朋友的建议).
在stackoverflow上找到了这个,它使用box-shadow而不是边框,看起来像#2的类似方法.

我对#2和#3的轻微抱怨是我需要为虚线边框添加另一个div,以便用户清楚地知道他正在裁剪什么.但我对他们所有人的更大抱怨是,这些都不是正确的方法.

有没有一个合适的/更好的/ 2018-ish /"它如此明显,你这个白痴"的方式来做到这一点？

更新:这是基本标记(如果有助于解决此问题,我也可以使用不同的标记)

#grandparentImage {
  background: url(https://9to5mac.com/wp-content/uploads/sites/6/2018/07/Desert-2.jpg) no-repeat;
  background-size: cover;
  position: relative;
  height: 500px;
}

#parentOverlay {
  background: rgba(0,0,0,0.5);
  height: 100%;
  position: relative;
}

#childCropper {
  border: 1px dashed #ccc;
  left: 50px;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50px;
}

Run Code Online (Sandbox Code Playgroud)

<div id="grandparentImage">
  <div id="parentOverlay">
    <div id="childCropper"></div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

编辑:这不是标记问题的重复 …

html javascript css

rmn*_*rmn

2018 10-02

10
推荐指数

1
解决办法

300
查看次数

如何将动画渐变添加到 svg 路径？

我有一个像这样的心脏 svg 路径：

<svg viewBox="0 0 100 100">
<path className="" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>

Run Code Online (Sandbox Code Playgroud)

我想在上面添加渐变效果，从左到右移动渐变，好像心脏在闪闪发光。

但是，path不接受background属性，如果我使用fill，它不接受渐变作为值。它也没有background-position属性（这样我就可以使用将其background-position从左移到右@keyframes）。

有没有办法实现这一目标？

css svg linear-gradients css-animations

cat*_*use

2020 08-09

10
推荐指数

1
解决办法

9168
查看次数

如何使用CSS为径向渐变设置动画？

我正在尝试为div框创建放射状渐变光泽效果，但我不确定这样做的最佳方法是什么。我没有发现实现我想要实现的目标的资源；只是光泽会影响看起来像叠加的效果。

我发现的大多数示例看起来都是这样的http://jsfiddle.net/nqQc7/512/。

下面，我显示了我要创建的内容。

#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  /*background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);*/
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite;
}

@keyframes colorChange {
  0% {
    background: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
  }
  50% {
    background: radial-gradient(ellipse farthest-corner at top, #FFFFFF 0%, #ffb3ff …

Run Code Online (Sandbox Code Playgroud)

css svg radial-gradients css-animations

Rhi*_*ian

2019 08-07

9
推荐指数

3
解决办法

253
查看次数

背景百分比的CSS计算如何工作？

我正在玩CSS渐变和位置,我有点设法做我想要的但幸运的猜测,但我想了解这实际上是如何工作的.

例如,这里是法国国旗(merci):

.serge_testDraw {
    width: 10rem;
    height: 10rem;
    border: 0.2rem solid black;
    background-image:
        linear-gradient(to right, blue 0%, blue 100%)
        , linear-gradient(to right, white 0%, white 100%)
        , linear-gradient(to right, red 0%, red 100%)
    ;
    background-size: calc(100% / 3) 100%;
    background-repeat: no-repeat;
    background-position: 0%, 50%, 100%;
}

Run Code Online (Sandbox Code Playgroud)

为什么背景位置是0%,50%,100%而不是0,33.33%(三分之一),66.66%(三分之二)？

另外,我对如何定位尺寸为100%的背景毫无头绪.

css percentage background-position

Ser*_*ook

2014 09-04

8
推荐指数

1
解决办法

304
查看次数

背景位置百分比不起作用

我读到的每个地方都说这应该可以正常工作,但由于某种原因,它不是.

这是为了修复别人的问题所以修复它对我来说无关紧要,我只是想知道为什么.问题出在了.br .bg-image.我知道我正在尝试使用calc()但是使用简单background-position: 50%也不起作用.

http://jsfiddle.net/uLaa9fnu/2/

html {
  height: 100%;
  width: 100%;
}
body {
  margin: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.bg-image {
  height: 600px;
  width: 800px;
  background-image: url('http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
}
.relative {
  position: relative;
}
.containeroverlay {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
}
.framesizer {
  height: 340px;
  width: 300px;
  overflow: hidden;
  position: absolute;
}
.frame {
  background-image: url('http://i.imgur.com/4AcIXsD.png');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 340px; …

Run Code Online (Sandbox Code Playgroud)

css percentage background-position

Jam*_*ker

lucky-day

7
推荐指数

1
解决办法

6907
查看次数

使用线性渐变作为背景的响应式闪耀动画

我想创建一个闪耀加载动画，它将出现在具有不同背景颜色的多个元素上。

目前，我正在使用background-image渐变并为background-position使用vw单位设置动画，但它不可扩展，我的元素将具有不同的长度。

有没有办法background-image用百分比单位制作动画？

创建的动画

body {
  background: black;
}

header {
  width: 100%;
  height: 50px;
  background-color: rebeccapurple;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-position: -100vw;
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    background-position: -100vw;    
  }
  100% {
    background-position: 100vw;   
  }
}

Run Code Online (Sandbox Code Playgroud)

<header></header>

Run Code Online (Sandbox Code Playgroud)

html css linear-gradients css-animations

Sar*_*tre

2020 10-21

7
推荐指数

1
解决办法

3906
查看次数

如何在设置背景大小动画时消除噪点

我有一个具有背景图片的div，并且我正在尝试无限地更改其比例。

我更改了background-size动画中的属性，但是如您所见，动画时会出现一些噪音或振动。我将如何删除它？

.pre-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center no-repeat #fff;
  background-size: 50%;
  animation: loading 5s ease-in-out infinite;
}

@keyframes loading {
  0% {
    background-size: 50%
  }
  50% {
    background-size: 55%
  }
  100% {
    background-size: 50%
  }
}

Run Code Online (Sandbox Code Playgroud)