[英]How do I center the linear gradient animation as it zooms it?
我正在學習如何通過更改它們的背景定位和元素的大小來為徑向漸變設置動畫。 我嘗試使用 flexbox 在 .animcontain 中垂直和水平對齊 .anim2，以及設置填充和邊距，但似乎沒有任何效果。 我如何 go 關於放大到徑向漸變背景的中心而不擠壓它？
body { background-color: black; color: white; margin: 0; }.align { display: flex; flex-direction: column; height: 100vh; width: 100vw; justify-content: center; align-items: center; }.container { display: grid; grid-template-columns: repeat(3, minmax(80px, 20vmin)); grid-auto-rows: minmax(80px, 20vmin); grid-gap: 10px; }.container > div { border: 2px solid white; } @keyframes anim1 { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }.anim1 { animation: anim1 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; background-size: 100% 3000%; background-image: linear-gradient( to bottom, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red ); border-radius: 10px; } @keyframes anim2 { 0% { width: 100%; height: 100%; } 100% { width: 1000%; height: 1000%; } }.animcontain { overflow: hidden; border-radius: 50%; }.anim2 { background-image: radial-gradient( red, orange, yellow, green, blue, indigo, violet ); animation: anim2 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; }
<!DOCTYPE html> <html> <head> </head> <body> <div class="align"> <div class="container"> <div class="anim1"></div> <div class="animcontain"> <div class="anim2"></div> </div> <div class="anim3"></div> </div> </div> </body> </html>
不要為寬度/高度設置動畫，為background-size設置動畫
body { background-color: black; color: white; margin: 0; }.align { display: flex; flex-direction: column; height: 100vh; width: 100vw; justify-content: center; align-items: center; }.container { display: grid; grid-template-columns: repeat(3, minmax(80px, 20vmin)); grid-auto-rows: minmax(80px, 20vmin); grid-gap: 10px; }.container > div { border: 2px solid white; } @keyframes anim1 { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }.anim1 { animation: anim1 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; background-size: 100% 3000%; background-image: linear-gradient( to bottom, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red ); border-radius: 10px; } @keyframes anim2 { 100% { background-size: 1000% 1000%; } }.animcontain { overflow: hidden; border-radius: 50%; background-image: radial-gradient( red, orange, yellow, green, blue, indigo, violet ); background-size: 100% 100%; background-position:center; animation: anim2 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; }
<div class="align"> <div class="container"> <div class="anim1"></div> <div class="animcontain"> </div> <div class="anim3"></div> </div> </div>
要使 anim2 居中，您只需在 animcontain class 中添加帶有位置項目中心的顯示網格：
body { background-color: black; color: white; margin: 0; }.align { display: flex; flex-direction: column; height: 100vh; width: 100vw; justify-content: center; align-items: center; }.container { display: grid; grid-template-columns: repeat(3, minmax(80px, 20vmin)); grid-auto-rows: minmax(80px, 20vmin); grid-gap: 10px; }.container>div { border: 2px solid white; } @keyframes anim1 { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }.anim1 { animation: anim1 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; background-size: 100% 3000%; background-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red); border-radius: 10px; } @keyframes anim2 { 0% { width: 100%; height: 100%; } 100% { width: 1000%; height: 1000%; } }.animcontain { overflow: hidden; display: grid; place-items: center; border-radius: 50%; }.anim2 { background-image: radial-gradient(red, orange, yellow, green, blue, indigo, violet); animation: anim2 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; }
<div class="align"> <div class="container"> <div class="anim1"></div> <div class="animcontain"> <div class="anim2"></div> </div> <div class="anim3"></div> </div> </div>
如何使我的網站放大和縮小而不影響中心的網站布局？
[英]How do I make it so my website zooms in and out without effecting the layout of the website from the center?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.