当浅蓝色逐渐变为深蓝色时，如何开始背景颜色？

Question

我真的想知道如何在Javascript中创建此效果，其中背景渐变径向变化。他们是如何做到的？

Answer 1

在这项工作中你不需要javascript，只需使用CSS radial-gradient

＆＃13;

＆＃13;

import atexit
import time

@atexit.register
def goodbye():
    print "Goodbye dear user"
    time.sleep(5)

＆＃13;

#grad {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #474747, #999); /* Standard syntax */
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用ColorZilla，您可以生成以下内容，该内容几乎与所有浏览器兼容：

.gradient-class
{
  background: #7db9e8; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #7db9e8 0%, #1e5799 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#7db9e8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* IE10+ */
  background: radial-gradient(ellipse at center, #7db9e8 0%,#1e5799 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

Answer 3

希望这会有所帮助

<div class="abc">
</div>

.abc{
 width:200px;
 height:200px;
 display:inline-block;
background: rgba(73,155,234,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(73,155,234,1)), color-stop(32%, rgba(73,155,234,1)), color-stop(60%, rgba(32,124,229,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: radial-gradient(ellipse at center, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
}

jsfiddle