[分享]css3太阳光有无到有特效

 CSS3 太阳光是用来增强网页视觉效果、制造视觉冲击力的一种效果。太阳光有无到有特效是其中比较常见的一种，下面我们来一起了解如何实现这种效果。 首先，我们需要利用 CSS3 的渐变效果生成一个白色到...

 CSS3 太阳光是用来增强网页视觉效果、制造视觉冲击力的一种效果。太阳光有无到有特效是其中比较常见的一种，下面我们来一起了解如何实现这种效果。

首先，我们需要利用 CSS3 的渐变效果生成一个白色到透明的渐变区域，代码如下：

.sunlight {
    width: 300px;
    height: 300px;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%);
} 

如你所见，我们用 background 属性调用了三种不同浏览器内核的渐变属性。这样，我们便能够确保这段代码在各种浏览器上都能够正确运作。

接下来，我们可以在 HTML 文档中加入下面的代码，利用 CSS3 的混合模式让我们的太阳光出现在页面上。

<div class="container">
    <img src="img/sun.png" alt="sun">
    <div class="sunlight"></div>
</div> 

这段 HTML 代码中，我们使用

元素来创建一个容器，其中包含了一个图片和一个渐变区块。

最后，我们可以利用 CSS3 的动画效果让这个太阳光旋转起来，代码如下：

@keyframes rotate{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

.sunlight {
    width: 300px;
    height: 300px;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%);
    animation: rotate 2s linear infinite;
} 

如果我们想让动画时间更长一些，可以将 animation-duration 属性的数值调大，如下所示：

.sunlight {
    animation-duration: 4s;
} 

经过这些步骤，我们就实现了一个非常酷炫的太阳光有无到有特效。