渐变涟漪

涟漪"/>

渐变涟漪

整个案例的制作过程很简单，首先我们先进行它的HTML布局。

用一个div标签包裹其他标签，分别给这些标签写入CSS样式。最外层的div标签我们给它定义一个class名称live，与其他的div标签进行区分。其中还要给里面的div标签和span标签进行定位，相对于最外层的div标签进行定位。如果不给它定位，涟漪的效果就很难实现。

给予类名称为live的css样式后我们就能得到一个宽高为400px，圆角为50%的圆；它的位置处于浏览器的正中心。这个时候我们给它添加背景颜色这样可以更清晰的看见它的涟漪效果。给span标签提添加动画效果的时候我们可以通过Css3的动画并调整他们的各自运动的时间和速度就可以达到涟漪效果并不需要写他们的js代码。

全部标签样式的代码如下：
里面有运用@keyframes关键帧进行动画效果。颜色可以随意调换，整体效果不会受到太大的影响。

需要注意的是：整个涟漪的动态效果都是需要animaton与关键帧一起使用才能产生动画效果。通过animation这个属性我们可以调节动画的时间、速度、循环次数等等。使用关键帧后我们就可以少些许多js代码。接下来是径向渐变和线性渐变的图片区别和解析。

径向渐变的效果图如下：
观察径向渐变时，需要把它对应的代码解除注释，并将live标签的背景颜色去掉。

我们可以看出它的渐变方式是从中间向外呈圆形扩散，一层一层的进行嵌套。如果去掉live标签的背景颜色后看不出效果，不妨看一下你是否有给他添加角度或者颜色相似。

线性渐变的效果图如下：
观察线性渐变时，需要把它对应的代码解除注释，并将live标签的背景颜色去掉。

我们可以发现三种颜色以180度进行上下分布，其中90度为左右分布。使用线性渐变后如果看不出效果很有可能是角度的问题。

通过两张图的对比我们很容易看出他们之间的区别。参考更多的渐变效果可以上W3C搜索，Css中的background背景，background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。并且background-image属性含有渐变效果。还有其他的渐变效果，我只运用了其中的径向渐变radial-gradient和线性渐变linear-gradient。