如何在CSS中制作点渐变效果
如何在CSS中制作点渐变效果
提问于 2018-08-07 01:39:03
我试图找到一种方法来创建一个波尔卡多渐变效果，在两种颜色之间淡入淡出。它将是一个纯色在左边，然后气泡/polkadot淡出效果将过渡，直到图像的其余部分是第二个纯色。以下链接提供了我所指的示例。这样的事情能在CSS中实现吗？
示例：
http://www.hobart.k12.ok.us/JUST%20FOR%20STUDENTS.bak2/AP%20Club/retro-yellow.jpg
回答 1
Stack Overflow用户
发布于 2018-08-07 08:32:42
CSS圆点背景
可以用圆点创建一个发光的背景：
.container {
width: 210px;
height: 210px;
background-image:
radial-gradient(circle at 0 0, yellow 5%, transparent 5.1%),
radial-gradient(circle at 30px 0, yellow 5%, transparent 5.1%),
radial-gradient(circle at 60px 0, yellow 5%, transparent 5.1%),
radial-gradient(circle at 90px 0, yellow 5%, transparent 5.1%),
radial-gradient(circle at 120px 0, yellow 5%, transparent 5.1%),
radial-gradient(circle at 150px 0, yellow 5%, transparent 5.1%),
radial-gradient(circle at 180px 0, yellow 5%, transparent 5.1%),
radial-gradient(circle at 210px 0, yellow 5%, transparent 5.1%),
radial-gradient(circle at 0 30px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 30px 30px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 60px 30px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 90px 30px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 120px 30px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 150px 30px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 180px 30px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 210px 30px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 0 60px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 30px 60px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 60px 60px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 90px 60px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 120px 60px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 150px 60px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 180px 60px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 210px 60px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 0 90px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 30px 90px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 60px 90px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 90px 90px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 120px 90px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 150px 90px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 180px 90px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 210px 90px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 0 120px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 30px 120px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 60px 120px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 90px 120px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 120px 120px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 150px 120px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 180px 120px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 210px 120px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 0 150px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 30px 150px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 60px 150px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 90px 150px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 120px 150px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 150px 150px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 180px 150px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 210px 150px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 0 180px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 30px 180px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 60px 180px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 90px 180px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 120px 180px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 150px 180px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 180px 180px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 210px 180px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 0 210px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 30px 210px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 60px 210px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 90px 210px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 120px 210px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 150px 210px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 180px 210px, yellow 5%, transparent 5.1%),
radial-gradient(circle at 210px 210px, yellow 5%, transparent 5.1%);
background-color: #b6084c;
}<div class="container">
</div>
但是目前不能对背景进行动画处理：
Use CSS3 transitions with gradient backgrounds
只有一些变通方法和技巧。
但是使用SVG可以实现这种背景和动画效果。
SVG也更适合于复杂的图形。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51712969
复制相关文章
相似问题
腾讯云开发者
