css - 使用 CSS 线性渐变创建无缝动画
问题描述
div {
border-radius: 2rem;
width: 10rem;
height: 10rem;
background-color: #0dd;
background-image:
linear-gradient(
-45deg,
rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 ), transparent
);
}
div {
animation-name: diagonal_move;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes diagonal_move {
0% {
background-position: 0rem 0rem;
}
100% {
background-position: 10rem 10rem;
}
}
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
由于上面的线性渐变动画,可以清楚地看到渐变的边缘 - 与与周围环境无缝融合相反。
试图隐藏边缘的解决方案是在顶部覆盖额外的渐变:
div {
border-radius: 2rem;
width: 10rem;
height: 10rem;
background-color: #0dd;
background-image:
linear-gradient( #0dd, transparent, transparent, transparent, #0dd ),
linear-gradient( 90deg, #0dd, transparent, transparent, transparent, #0dd ),
linear-gradient(
-45deg,
rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 ), transparent
);
}
div {
animation-name: diagonal_move;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes diagonal_move {
0% {
background-position: 0rem 0rem;
}
100% {
background-position: 10rem 10rem;
}
}
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这种方法的问题是它隐藏了大部分原始渐变以及接缝。它还会在接缝处创建明亮的线条。
那么有没有办法在渐变结束时翻转或镜像渐变以创建无缝图案?或者,原始渐变可能会更大并缩小以产生无缝图案的错觉。这怎么可能实现?
解决方案
您的渐变由 3 个部分组成(在 4 个参考点/颜色定义之间),这会创建一种“不对称”结构,因为末尾的颜色与开头的颜色不同。如果添加另一个参考点/颜色(与第一个相同),渐变在开始和结束以及正方形的其他两个角处具有相同的颜色,因此动画效果平滑:
div {
border-radius: 2rem;
width: 10rem;
height: 10rem;
background-color: #0dd;
background-image:
linear-gradient(
-45deg,
rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 )
);
}
div {
animation-name: diagonal_move;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes diagonal_move {
0% {
background-position: 0rem 0rem;
}
100% {
background-position: 10rem 10rem;
}
}
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
推荐阅读
- c# - ItemsControl、ItemContainerStyle 和 ItemTemplate
- python - 导入 ft2font 时 DLL 加载失败:找不到指定的模块
- typo3 - 无法为核心扩展以外的扩展下载语言包
- ios - Swift解码JSON,同一字段有两种可能的类型
- reactjs - React js:TypeError:Object(...)不是函数
- c# - 如何从数据库中获取特定字段?
- javascript - Javascript 将 \\ 替换为 /
- sql-server - 来自 Powershell 的存储过程调用中未提供 TVP
- sequel - 如何在 Sequel 中按降序排列关联
- android - Android 策略的权限