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

时间:2018-08-06 17:39:03

标签: css

我正在尝试找到一种方法来创建一种在两种颜色之间渐隐的圆点渐变效果。它将是左侧的一种纯色,然后气泡/圆点淡入淡出效果将过渡到图像的其余部分是第二种纯色。以下链接提供了我的意思的示例。可以在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

1 个答案:

答案 0 :(得分:0)

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