过渡 2s 不适用于线性梯度（）
[英]transition 2s not working for linear-gradient()
问题描述
Hello i have this div with linear-gradient() .
您好，我有这个带有linear-gradient() div 。
On hover the div takes 2 seconds to expand to 200px width and to ad blue and green to the linear-gradient() .在 hover 上，div 需要 2 秒才能扩展到 200px 宽度并将蓝色和绿色广告添加到linear-gradient() 。
But blue and green are added immediately while it does take 2 seconds to expand.但是蓝色和绿色会立即添加，而扩展确实需要 2 秒。
Does anyone know the answer to that.有谁知道答案。
Here is my code.这是我的代码。
div { background-image: linear-gradient( to right, red, yellow); background-color: red; width: 100px; border: 2px solid black; border-radius: 5px; transition: 1s; } div:hover { width: 200px; background-image: linear-gradient( to right, red, yellow, blue, green); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>test</title> </head> <body> <div>hello world</div> </body> </html>
Also i would like the blue to appear first and then the green.我也希望先出现蓝色，然后出现绿色。
2 个解决方案
解决方案1
1 已采纳 2020-12-28 09:34:07
You don´t need to change the background image, just make it be the final size, and let the growing div show more or less of it您不需要更改背景图像，只需将其设置为最终大小，并让不断增长的 div 或多或少地显示它
div { background-image: linear-gradient( to right, red, yellow 100px, blue, green); background-color: red; background-size: 200px; width: 100px; border: 2px solid black; border-radius: 5px; transition: 1s; } div:hover { width: 200px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>test</title> </head> <body> <div>hello world</div> </body> </html>
解决方案2
0 2020-12-28 09:33:22
you can use background size for transition linear-gradient , because linear-gradient can not transition.您可以使用背景大小进行转换linear-gradient ，因为linear-gradient不能转换。
div { background-image: linear-gradient( to right, red, yellow, blue, green); background-color: red; width: 100px; border: 2px solid black; border-radius: 5px; transition: 1s; background-size: 200% 200%; } div:hover { width: 200px; background-size:100% 100%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>test</title> </head> <body> <div>hello world</div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.