如何在缩放线性渐变 animation 时将其居中？
[英]How do I center the linear gradient animation as it zooms it?
问题描述
I'm learning how to animate radial gradients by changing their background-positioning and the size of their elements.
我正在学习如何通过更改它们的背景定位和元素的大小来为径向渐变设置动画。 I've tried using flexbox to vertically and horizontally align.anim2 inside of.animcontain, as well as setting padding and margins, but nothing seems to be working.我尝试使用 flexbox 在 .animcontain 中垂直和水平对齐 .anim2，以及设置填充和边距，但似乎没有任何效果。 How do I go about zooming into the center of the radial gradient background without squishing it?我如何 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>
2 个解决方案
解决方案1
0 已采纳
Don't animate width/height, animate the background-size不要为宽度/高度设置动画，为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>
解决方案2
0 2021-03-03 22:12:54
To center anim2 you just have to add display grid with place-items center in animcontain class:要使 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使我的网站放大和缩小而不影响中心的网站布局？ - How do I make it so my website zooms in and out without effecting the layout of the website from the center?
如何将线性渐变宽度修改为100％？ - How Do I Modify My Linear Gradient Width to 100%?
如何在 email 中制作线性渐变背景？ - How do I make linear-gradient background in email?
如何将彩虹线性渐变滤镜应用于 SVG？ - How do I apply a rainbow linear gradient filter to an SVG?
如何居中显示此文字动画？ - How do I center this text animation?
我如何将我的段落的 animation 居中？ - How do i center the animation of my paragraph?
从中心开始的CSS线性渐变 - CSS linear gradient from center
如何将 2 colors 作为线性渐变并排放置在中心 css - how to 2 colors as linear gradient side by side in center css
如何在不丢失动画的情况下将线性渐变应用于图像？ - How to apply linear-gradient to image without loosing animation?
如何在所有缩放和浏览器上保持相同的网站布局？ - How do I maintain same website layout at all zooms and browsers?
相关标签