使用 CSS 線性漸變創建無縫 animation
[英]Creating seamless animation with CSS linear gradient
原文
2021-02-10 17:48:45
0
2
css/
css-animations/
linear-gradients/
css-gradients/
repeating-linear-gradient
問題描述
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>
這種方法的問題是它隱藏了大部分原始漸變以及接縫。 它還會在接縫處創建明亮的線條。
那么有沒有辦法在漸變結束時翻轉或鏡像漸變以創建無縫圖案？ 或者，原始漸變可能會更大並縮小以產生無縫圖案的錯覺。 這怎么可能實現？
2 個解決方案
解決方案1
1 已采納 2021-02-10 17:58:42
您的漸變由 3 個部分組成（在 4 個參考點/顏色定義之間），這會創建一種“不對稱”結構，因為末尾的顏色與開頭的顏色不同。 如果添加另一個參考點/顏色（與第一個相同），漸變在開始和結束以及正方形的其他兩個角具有相同的顏色，因此 animation 工作順利：
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>
解決方案2
1 2021-02-10 23:21:40
在這種情況下，最好考慮一個比元素大兩倍的重復梯度，這樣您就不必擔心background-position中的特定值：
.box { border-radius: 2rem; width: 10rem; height: 10rem; background-color:; background: repeating-linear-gradient( -45deg, rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 ) 25% ) bottom right/200% 200% #0dd; animation: diagonal_move 6s linear infinite; } @keyframes diagonal_move { 100% { background-position: top left; } } body { display: flex; justify-content: center; align-items: center; height: 100vh; margin:0; }
<div class="box"></div>
有關值和計算的更多詳細信息： Using percent values with background-position on a linear-gradient
CSS 背景：線性漸變 - Animation 未按預期運行
[英]CSS Background: Linear Gradient - Animation is not functioning as Wished to be
如何在CSS中的無縫背景圖像上使用不透明度等效的線性漸變
[英]How to do equivalent of a linear-gradient with opacity on a seamless background image in CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.