首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在CSS中制作点渐变效果

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

Stack Overflow用户
提问于 2018-08-07 01:39:03
回答 1查看 1.8K关注 0票数 0

我试图找到一种方法来创建一个波尔卡多渐变效果,在两种颜色之间淡入淡出。它将是一个纯色在左边,然后气泡/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

EN

回答 1

Stack Overflow用户

发布于 2018-08-07 08:32:42

CSS圆点背景

可以用圆点创建一个发光的背景:

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<div class="container">

</div>

但是目前不能对背景进行动画处理:

Use CSS3 transitions with gradient backgrounds

只有一些变通方法和技巧。

但是使用SVG可以实现这种背景和动画效果。

SVG也更适合于复杂的图形。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51712969

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档