相关疑难解决方法(0)

我正在尝试添加一个按钮,我有一个按钮,它的背景是用css线性渐变制作的,但它不起作用.

这是我的按钮的CSS.

a.button
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956));
-webkit-transition: background 5s linear;
}

a.button:hover
{
-webkit-gradient(linear, left top, left bottom, color-stop(0%,@greenhover), color-stop(100%,#89af37))
}

如果你想知道@green和@greenhover,我正在使用.less来制作我的CSS.

这有什么不对吗？有任何想法吗？

是否真的没有办法用CSS动画渐变背景？

就像是:

@-webkit-keyframes pulse {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
  50% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
}

我知道,对于Safari 5.1+和Chrome 10+,有一个新的渐变语法,但是现在,我必须坚持使用旧的渐变语法.

我的css3中有一个背景图像,图像和渐变定义.我也想在类改变on_time时进行转换 - > too_late或反之亦然.

我无法在渐变上获得过渡.这是以某种方式支持css3吗？

谢谢

div.too_late
{
    color: White;        
    background-image: url(../Content/images/uit_white.png), -webkit-linear-gradient(top, #feb233 0%, #f39801 100%);       

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;    
}

div.on_time
{
    color: #222;        
    background-image: url(../Content/images/uit_black.png), -webkit-linear-gradient(top, yellow 0%, #99ff33 100%);    

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;           
}

Tailwind CSS 是否允许渐变过渡，即更改“从”或“到”颜色，以便任一颜色的渐变通过过渡而改变？

我尝试过的：

<button class="transition duration-500 ease-in-out bg-gradient-to-t from-black to-white hover:to-red-500">
    Hover me
</button>

我想移动具有多种颜色的渐变,但问题是动画不平滑,只是在每一步都改变了它的位置.

这是

<style>
.animated {
    width:300px;
    height:300px;
    border:1px solid black;
    animation:gra 5s infinite;
    animation-direction:reverse;
    -webkit-animation:gra 5s infinite;
    -webkit-animation-direction:reverse;

    animation-timing-function:linear;
    -webkit-animation-timing-function:linear;
}
@keyframes gra {
    0% {
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57));
        background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
        background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
    }
    50% {
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57));
        background: -webkit-linear-gradient(-45deg, #ff670f …

我正在开发基于引导程序的网页,在我的CSS文件中,我有以下代码:

body {
  height: 100%;
  background: #3a7bd5; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #3a7bd5 , #3a6073); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #3a7bd5 , #3a6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

它将渐变作为背景应用于我的页面,但是我还有另外两个渐变:

background: #114357; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #114357 , #F29492); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #114357 , #F29492); /* W3C, IE 10+/ Edge, Firefox 16+, …

在我在网上阅读的所有资料中,似乎CSS自定义属性和CSS变量是相同的.但是,在Mozilla Developer Network文档的"CSS变量的继承"部分的示例结尾处,有一个令人困惑的声明:

请记住,这些是自定义属性,而不是实际的CSS变量.该值在需要时计算,不存储以用于其他规则.例如,您不能为元素设置属性,并期望在兄弟的后代规则中检索它.该属性仅为匹配选择器及其后代设置,就像任何普通的CSS一样.

这让我觉得这两个概念不是同义词.

自定义属性和变量之间有什么区别？

我有下面的代码。如何平滑地过渡渐变停止点？它只是突然从一种转变为另一种。

我的大多数渐变动画示例似乎都使用渐变位置，但我相信更改渐变停止点也应该是可能的。

.test {
    display: inline-block;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    background: conic-gradient(red, red);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: auto;
    -webkit-mask:radial-gradient(circle, transparent 50%, white calc(50% + 1px));

    animation:
        rotate
        4.5s
        ease-out
        0s
        infinite
        none
        running;
}

@keyframes rotate {
    0% {
        background-image: conic-gradient(red, red);
    }

    30% {
        background-image: conic-gradient(red 70%, transparent);
    }

    70% {
        background-image: conic-gradient(red 30%, transparent, transparent, transparent);
    }

    100% {
        background-image: conic-gradient(red, transparent);
    }
}

<div class="test"></div>

我有以下按钮。

上面按钮的 CSS 是这样的：

.cta-btn {
  display: inline-block;
  margin: 20px 0 0 20px;
  color: #fff;
  background-color: #FF8F1B;
  background-image: linear-gradient(to right, #2ab3ff, #ff2d00);
  box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85);
  font-size: 21px;
  border-radius: 30px;
  padding: 12px 21px;
  font-family: Montserrat;
}

<a href="#" class="cta-btn">click me</a>

当我将鼠标悬停在按钮上时，我希望按钮能够平滑地更改渐变颜色。当我悬停按钮时，我不希望渐变颜色只是捕捉到按钮上。这是我尝试平滑渐变颜色过渡：

a.cta-btn:hover {
  background-image: linear-gradient(to right,#FF2A67,#FF5D3A);
  color: #fff;
  box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85);
  transition: background-image .3s linear;
  transition: box-shadow .3s linear;
}

任何帮助深表感谢。

如何在悬停时添加从纯色到背景渐变色的动画？可能是从左向右悬停时？

我有这个示例代码，但是当悬停时，更改颜色太即时了。

我尝试过使用这些参考文献：

将 CSS3 过渡与渐变背景结合使用

使用 CSS 制作线性渐变动画

但似乎无法弄清楚如何采用最简单的悬停方法。其他参考资料说在悬停时添加伪元素，但使用它时似乎有点复杂。只是想在为渐变文本设置动画时使用悬停元素。

如何使用这些类型的渐变文本颜色添加过渡？

示例代码：

.hover-grad-txt {
  font-size:100px;
  text-align:center;
  color:#191335;
  background-image:linear-gradient(to right, #191335, #191335);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:all 0.4s ease-in-out;
}

.hover-grad-txt:hover {
  background-image:linear-gradient(to right, #01A5F8, #01BFD8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<span class="hover-grad-txt">Spear</span>

我有一些使用以下样式在悬停时使用背景渐变设置样式的菜单项:

#sidebar ul li a:hover {
    background-image: linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
    background-image: -o-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.05, rgb(68,68,68)),
        color-stop(1, rgb(51,51,51))
    );
    color: #f0f0f0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

我的问题是,是否可以使用CSS3过渡或动画从右侧滑入新背景(由渐变定义)？或者我将不得不求助于使用精灵图像或Javascript？

我试图做一个文本显示CSS动画像这一个。使用::before和::after似乎是一种过于复杂的方法，因此我尝试使用线性渐变背景颜色、背景位置或其他可能更简单的方法来执行此操作。

:root {
  --primary-rgba: rgba(17,184,106,1);
  --secondary-rgba: rgba(255,255,255,1);
}

@keyframes slidein {
  0% {
    background: transparent;
  }
  25% {
    background: linear-gradient(90deg, var(--secondary-rgba) 0%, var(--secondary-rgba) 50%, var(--primary-rgba) 50% var(--primary-rgba) 100%); 
  }
  50% {
    background: var(--secondary-hex);
  }
  75% {
    background: linear-gradient(90deg, var(--primary-rgba) 0%, var(--primary-rgba) 50%, var(--secondary-rgba) 50% var(--secondary-rgba) 100%); 
  }
  100%   {
    background: transparent;
  }
}

我什至想知道向动画添加更多帧是否会使其按照我想要的方式工作，并尝试在一堆（重复）帧中进行黑客攻击。仍然没有运气。

在发现CSS 过渡可能还不支持渐变之后，我尝试使用背景位置来显示文本，但没有成功。

这些方法中的任何一种都可行吗？

我希望实现一种效果,而不是当用户将鼠标悬停在div上时,它的背景颜色变成了一个渐变,使用纯CSS,可以从一个角平滑地切换到另一个角.

我想要实现的效果,试图将其更多地用于文字,是背景的较暗部分(具有0.9不透明度的部分)在光标保持在元素上方的情况下从一个角落反复滑动到另一个角落.

实际发生的是背景从一个状态跳到另一个状态.我哪里错了？我怎样才能让它成为动画,流畅的效果？

这是我的代码:

#test {
  width: 200px;
  height: 200px;
  background-color: rgba(215, 54, 92, 0.7);
}
@keyframes test_hover {
  from {
    background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, …