css - 滚动时翻转线性渐变
问题描述
我使用的是 45 度角的线性渐变,但是当我向下滚动时,我希望它翻转,而不是重复,以便颜色匹配。
这就是我现在所拥有的;
body {
height: 100vh;
width: 100vw;
overflow-x: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
background: rgb(253, 41, 123);
background: linear-gradient(
45deg,
rgba(253, 41, 123, 1) 0%,
rgba(255, 88, 100, 1) 47%,
rgba(255, 101, 91, 1) 100%
);
}
div {
height: 1500px;
}
<div></div>
谁能帮我?蒂亚!
解决方案
这是一个想法mask
,其中诀窍是创建两个具有相反渐变的不同图层,蒙版将创建交替的“孔”以查看底部:
html {
min-height: 100vh;
position: relative;
z-index: 0;
background: rgb(253, 41, 123);
background:
linear-gradient( to top right, rgba(253, 41, 123, 1) 0%, rgba(255, 88, 100, 1) 47%, rgba(255, 101, 91, 1) 100%)
0 0/100% 100vh;
}
html::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient( to bottom right, rgba(253, 41, 123, 1) 0%, rgba(255, 88, 100, 1) 47%, rgba(255, 101, 91, 1) 100%)
0 0/100% 100vh;
-webkit-mask: repeating-linear-gradient(transparent 0 100vh, #fff 0 200vh)
}
div {
height: 1500px;
}
<div></div>
推荐阅读
- python - 有没有一种优雅的方法可以在 python 中的多层列表中找到一个项目
- javascript - 无法在“元素”上执行“动画”:参数 1 不是“对象”类型
- android - Jetpack 撰写类似 twitter 标题的设计
- python - 删除所有不包含指定字符串的列表元素
- mysql - 我收到以下错误:sequelize 中不是有效的属性定义
- ms-access - 重新查询表单与重新查询记录集
- html - 如何在里面放置元素在css中互相下
- ethereum - ERC721 令牌与元数据和 Enumerable 与 Openzeppelin v4.1.0
- c++ - 检查 lambda 是否为 noexcept
- c - 对 char 变量使用 malloc 不能获取输入数据字符