如何在 CSS 中制作点渐变效果

Question

我正在尝试找到一种方法来创建在 2 种颜色之间渐变的 polkadot 渐变效果。左边是一种纯色，然后气泡/圆点淡化效果将过渡，直到图像的其余部分是第二种纯色。以下链接提供了我的意思的示例。在 CSS 中可以实现这样的事情吗？

例子：

https://www.123rf.com/photo_82363325_stock-vector-halftone-pattern-comic-background-dotted-retro-backdrop-with-circles-dots-design-element-for-web-ban.html?fromid=c1RuREVxQmNKMW0yMUc3U05BdEZJQT09

http://www.hobart.k12.ok.us/JUST%20FOR%20STUDENTS.bak2/AP%20Club/retro-yellow.jpg

Answer 1

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 也更适合复杂的图形。