小编Geo*_*ins的帖子

滑动动画文字颜色变化

我有一个按钮,在悬停时右侧有一个背景颜色幻灯片,工作正常,但我需要更改文本颜色.我设法让它褪色,但这不能正常工作.我想要的是从右侧开始的颜色过渡幻灯片与背景变化一致.

.slideybutton {
    background-size: 200% 100%;
    background-image: linear-gradient(to right, white 50%, blue 50%);
    transition: background-position 1s linear, color 1s linear;
    color: blue;
}
.slideybutton:hover {
    background-position: -100% 0;
    color: white;
}

Run Code Online (Sandbox Code Playgroud)

<a class="slideybutton">
 Lorem ipsum dolor sit amet.
</a>

Run Code Online (Sandbox Code Playgroud)

我已经看到了这个问题,但在这种情况下唯一的解决办法是不可行的. 滑动改变文本颜色动画

我缺少一些CSS技巧吗？谷歌搜索不会导致任何指向正确的方向,所以我担心我正在尝试不可能的事情.

我很乐意使用JS或jQuery,如果它能实现我想要的.

html css

Geo*_*ins

2017 05-23

7
推荐指数

1
解决办法

2422
查看次数

具有重复线性渐变的交叉影线效果导致图案不均匀

我试图在 CSS 中创建一个对角线交叉影线图案作为背景。我从CSS-Tricks 中条纹背景的示例开始。

.crosshatch {
	width: 500px;
	height: 200px;
  color: white;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.5) 1px,
	transparent 1px,
	transparent 5px
  );
}

Run Code Online (Sandbox Code Playgroud)