这个网站背景渐变效果怎么实现的?

2023-12-09 17:24:11 +08:00
 isajdhs

地址: https://imagine.meta.com/

1789 次点击
所在节点    CSS
3 条回复
ltq918
2023-12-09 19:42:49 +08:00
```css

.x1e2d8s5 {
background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,0) 40%),radial-gradient(hsla(44,100%,66%,1) 30%,hsla(338,68%,65%,1),hsla(338,68%,65%,.4) 41%,transparent 52%),radial-gradient(hsla(272,100%,60%,1) 37%,transparent 46%),linear-gradient(155deg,transparent 65%,hsla(142,70%,49%,1) 95%),linear-gradient(45deg,hsla(213,100%,44%,1),hsla(209,100%,53%,1));
}

```
ltq918
2023-12-09 19:56:33 +08:00
这个是完整的
```css

.radient-background {
background-image: radial-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 40%), radial-gradient(hsla(44, 100%, 66%, 1) 30%, hsla(338, 68%, 65%, 1), hsla(338, 68%, 65%, .4) 41%, transparent 52%), radial-gradient(hsla(272, 100%, 60%, 1) 37%, transparent 46%), linear-gradient(155deg, transparent 65%, hsla(142, 70%, 49%, 1) 95%), linear-gradient(45deg, hsla(213, 100%, 44%, 1), hsla(209, 100%, 53%, 1));
background-position: bottom left, 109% 68%, 109% 68%, center, center;
background-size: 200% 200%, 285% 500%, 285% 500%, cover, cover;
background-repeat: no-repeat;
opacity: .08;
}

```
isajdhs
2023-12-09 20:22:08 +08:00
@ltq918 #1 找到了,谢谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/998967

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX