关闭

css3质感分析(5)径向渐变叠加纹理(圆心可变)

645人阅读 评论(0) 收藏 举报
分类:

css3质感系列会详细分析网上流行的css3的一些质感效果,

让大家不再恐惧Css3,最终可以见到一张图片就可以构思出他的css3实现!

三个原则:

渐变叠加的顺序
径向渐变的起点
background-position的运用

1.径向渐变默认的圆心在中心,也即 50% 50%处 注意这个数字!(很多人可能会认为是0% 0%)
如图所示我制造一个小圆,根据上一文的知识,只需要起点黄色-到达黄色边界-起点绿色-到达绿色边界-透明的写法即可。

background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0))


下面我们调整圆心Y轴到100%,很容易理解,图形的圆心会跑到最下边,X轴不变

background-image: -webkit-radial-gradient(50% 100% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0))


大家注意,这里有个非常重要的现象,下面残缺了一部分,出现了一个半圆。这就是半圆的画法,再次记住,下面是 残缺的
我们同样可以尝试 Y轴到100% x轴也到100% 那么现象应该是图形在右下角的1/4圆;


2 background-position是啥
注意 background-position 只改变的是图案整体的位置!不会破坏图案本身,最多会出现 “穿透”的现象,注意,这与圆心变化是截然不同的

div{width:100px;height:100px;margin-top:10px;border:1px solid #ddd;}
div{
background-color: #63773F;
background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0));
background-position:50px 0px;
background-size: 100px 100px;
}


大家注意,仍然是在中心的渐变,但是向右平移了50px,图案从左边穿透出来了!
一定不要跟圆心变化混淆!

3 渐变叠加性。我们可以尝试

div{width:100px;height:100px;margin-top:10px;border:1px solid #ddd;}
div{
background-color: #63773F;
background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
-webkit-radial-gradient(50% 60% , circle , red 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0));
background-position:50px 0px;
background-size: 100px 100px;
}

注意上面的把下面的黑色圈子遮住了!!!
即,渐变写在上面的会遮住下面的

3个重要的原则了解完毕后,我们开始做一个非常牛逼的效果。

第一次看到这图,很多人都有种 “吓尿了”的感觉。。其实我也是。。

为了降低难度,我们先分析一个“跬步” 在进行渐变重复。

根据渐变的叠加性,拆分一下

其实怎么拆分都可以,这只是我个人理解而已、

我们配合上面的文章分析一下图片的位置

1号图  中心渐变Y轴略靠下(因为图片无损,圆心在边缘)- position X在最右边(总宽度的一半)

2号图  中心渐变Y轴略靠上(因为图片无损,圆心在边缘)- position X在最右边(总宽度的一半)

上两张position最右最左都是一样的。

3号图  这张图可以有两个理解,一是position Y在最下面,圆心在边缘,之后圆心调整位置,Y轴略增大,靠下

或者是 直接position定位到最上面也可以。

4号图类似

5号跟六号我们已经讲过了,一个半圆,所以不需要调整background-position 只需要圆心X轴 100% 或0即可

7号跟八号也很明显,一个半圆,圆心X轴100%或者0 ,跟5号6号类似,之后用background-position X轴,Y轴各调整50px即可。

我们记录下刚才的分析,然后把顺序排列好,注意小圆写在大圆前面即可~

background-image: -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),//1号
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),//2号
-webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),//3号
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),//4号
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),//5号
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%),//6号
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%), //7号
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%);   //8号

之后写好位置(1-8)

background-position: 50px 0px,
px 0px,
px,
px,
%, 0 0%,
px 50px,
px 50px;

之后配好“跬步” 大小

background-size: 100px 100px;

完整代码

div{width:300px;height:300px;margin-top:10px;border:1px solid #ddd;}
div{
background-color: #63773F;
background-image: -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
-webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%),
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%);
background-position: 50px 0px,
px 0px,
px,
px,
%, 0 0%,
px 50px,
px 50px;
background-size: 100px 100px;
}

最复杂的过去了,我们分析几个简单的例子~

我们一眼就可以看出来 重复的图像是

根据我们的分析,他有四个重复的1/4圆,这个时候先不要考虑渐变叠加1/4圆,虽然我们也可以很容易的写出来,但是代码较多

这明显是背景一个大圆+ 一个大圆,上移一个半径,左移一个半径,之后上面跟左边都冲开了背景而已。

因此我们的核心代码只有两句

background-position: 0 0px, 40px 40px;
background-size: 80px 80px;

至于渐变的写法,就不用说了。。。一个圆而已。。

另一个技巧  画线。这个还是蛮常用的,写法很简单 透明起点(像素)+ 线1px +透明 即可

background-image: -webkit-radial-gradient(50% 50%, circle, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px)

效果:

配合我们讲解的渐变叠加,大家可以考虑一下这个东西怎么做:


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9880次
    • 积分:339
    • 等级:
    • 排名:千里之外
    • 原创:24篇
    • 转载:9篇
    • 译文:0篇
    • 评论:0条
    文章分类