小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

有趣的前端css特效-咱们裸熊

今天分享一个有趣的游戏css特效。不知道大家有没有看过一个动画片，名字叫做“咱们裸熊”，主人公是熊熊三兄弟：棕熊大大、熊猫胖达、白熊阿奇。

下面的游戏主人公就是三兄弟之一：白熊阿奇；以白熊为基础平铺，隐藏一个非熊类，就是今天的游戏特效：大家来找茬啦！

1.分解图形

首先，可以确定的是，平铺类的图形都是由一个基本单位来做横向和纵向的复制而组成的，本图亦然，通过观察我们可以发发现它的基本单位如下

2.画白熊

知道基本单位之后我们就开始绘制。白熊的耳朵眼睛鼻子可以使用圆形样式代替。代码如下

div:before {

    width: 100%;

    height: 100%; 

      /* 

      //白熊右眼

      radial-gradient(circle at 11% 91%,black 2%,rgba(0,0,0,0) 3%),

      //白熊右耳朵

      radial-gradient(circle at 25% 79%,white 6%,rgba(255,255,255,0) 7%),

      //白熊右上鼻子 1/2

      radial-gradient(circle at 0 105%,#ddd 7%,rgba(255,255,255,0) 8%),

      //白熊左上鼻子 1/2

      radial-gradient(circle at 100% 105%,#ddd 7%,rgba(255,255,255,0) 8%),

      //白熊右上脸 1/2

      radial-gradient(ellipse at 0 100%,white 21%,#c0c0c0 22%,#c0c0c0 24%,rgba(192,192,192,0) 25%),

      //白熊右耳朵外轮廓

      radial-gradient(circle at 25% 79%,#c0c0c0 11%,rgba(192,192,192,0) 12%),

      //白熊左眼

      radial-gradient(circle at 89% 91%,black 2%,rgba(0,0,0,0) 3%),

      //白熊左耳朵

      radial-gradient(circle at 75% 79%,white 6%,rgba(255,255,255,0) 7%),

      //白熊左上脸 1/2

      radial-gradient(ellipse at 100% 100%,white 21%,#c0c0c0 22%,#c0c0c0 24%,rgba(192,192,192,0) 25%),

      //白熊左耳朵外轮廓

      radial-gradient(circle at 75% 79%,#c0c0c0 11%,rgba(192,192,192,0) 12%),

      //第二只白熊左耳

      radial-gradient(circle at 28% 28%,white 6%,rgba(255,255,255,0) 7%),

      //第二只白熊右耳

      radial-gradient(circle at 72% 28%,white 6%,rgba(255,255,255,0) 7%),

      //第二只白熊左眼

      radial-gradient(circle at 40% 42%,black 3%,rgba(0,0,0,0) 4%),

      //第二只白熊右眼

      radial-gradient(circle at 60% 42%,black 3%,rgba(0,0,0,0) 4%),

      //第二只白熊鼻点

      radial-gradient(circle at 50% 54%,black 6%,rgba(0,0,0,0) 7%),

      //第二只白熊鼻底色

      radial-gradient(circle at 50% 56%,#ddd 15%,rgba(255,255,255,0) 16%),

      //第二只白熊底色

      radial-gradient(ellipse at 50% 100%,white 55%,#c0c0c0 56%,#c0c0c0 60%,rgba(192,192,192,0) 61%),

      //白熊左耳朵外轮廓

      radial-gradient(circle at 28% 28%,#c0c0c0 11%,rgba(192,192,192,0) 12%),

      //白熊右耳朵外轮廓

      radial-gradient(circle at 72% 28%,#c0c0c0 11%,rgba(192,192,192,0) 12%); */

    background-size: 10em 10em;//设置图形大小为正方形

    background-position: 5em 5em;

}

当图形平铺完成后得到下图

这里由于图形限制双数排的图形并不完整，那么接下来我们就将图案补齐

3.补齐图案

需要补齐的图案是白熊的嘴巴以及身体部分，

div{

 background-image: 

      //白熊鼻子

      radial-gradient(circle at 50% 55%,black 6%,rgba(0,0,0,0) 7%),

      //白熊鼻子底色

      radial-gradient(circle at 50% 56%,#ddd 15%,rgba(255,255,255,0) 16%),

      //熊熊轮廓

      radial-gradient(ellipse at 50% 100%,rgba(192,192,192,0) 55%,#c0c0c0 56%,#c0c0c0 60%,rgba(192,192,192,0) 61%);

background-size: 10em 10em;

}

得到如下图形

将图形平铺后，一张熊熊错位排列图就完成啦。

4.绘制找茬图片

嘿嘿，绘个大白狗吧。鼻子改成椭圆形，耳朵竖起来。

div:after {

    width: 10em;

    height: 10em;

    background-repeat: no-repeat;

    background-image:

//熊熊右眼

      radial-gradient(circle at 11% 91%,black 2%,rgba(0,0,0,0) 3%),

      //熊熊右耳

      radial-gradient(circle at 25% 79%,white 6%,rgba(255,255,255,0) 7%),

      //熊熊右1/2鼻子底色

      radial-gradient(circle at 0 105%,#ddd 7%,rgba(255,255,255,0) 8%),

      //熊熊左1/2鼻子底色

      radial-gradient(circle at 100% 105%,#ddd 7%,rgba(255,255,255,0) 8%),

      //熊熊右脸

      radial-gradient(ellipse at 0 100%,white 21%,#c0c0c0 22%,#c0c0c0 24%,rgba(192,192,192,0) 25%),

      //熊熊右耳轮廓

      radial-gradient(circle at 25% 79%,#c0c0c0 11%,rgba(192,192,192,0) 12%),

      //熊熊左眼

      radial-gradient(circle at 89% 91%,black 2%,rgba(0,0,0,0) 3%),

      //熊熊左耳

      radial-gradient(circle at 75% 79%,white 6%,rgba(255,255,255,0) 7%),

      //熊熊左脸

      radial-gradient(ellipse at 100% 100%,white 21%,#c0c0c0 22%,#c0c0c0 24%,rgba(192,192,192,0) 25%),

      //熊熊左耳轮廓

      radial-gradient(circle at 75% 79%,#c0c0c0 11%,rgba(192,192,192,0) 12%),

      

      //狗狗左眼

      radial-gradient(circle at 35% 44%,black 3%,rgba(0,0,0,0) 4%),

      //狗狗右眼

      radial-gradient(circle at 65% 44%,black 3%,rgba(0,0,0,0) 4%),

      //狗狗鼻子

      radial-gradient(ellipse at 50% 50%,black 20%,rgba(0,0,0,0) 21%),

      //狗狗鼻下线

      linear-gradient(black,black),

      //狗狗鼻嘴底色

      radial-gradient(circle at 50% 56%,#ddd 17%,rgba(255,255,255,0) 18%),

      //狗狗左耳 

      radial-gradient(ellipse at 60% 65%,white 60%,rgba(255,255,255,0) 65%),

      //狗狗右耳

      radial-gradient(ellipse at 40% 65%,white 60%,rgba(255,255,255,0) 65%), 

      //狗狗底色

      radial-gradient(ellipse at 50% 100%,white 55%,#c0c0c0 56%,#c0c0c0 60%,rgba(192,192,192,0) 61%),

      //狗狗左耳轮廓

      radial-gradient(ellipse at 60% 65%,#c0c0c0 60%,rgba(192,192,192,0) 65%),

      //狗狗右耳轮廓   

      radial-gradient(ellipse at 40% 65%,#c0c0c0 60%,rgba(192,192,192,0) 65%), 

      //狗狗身体轮廓

      radial-gradient(ellipse at 50% 100%,white 65%,rgba(255,255,255,0) 65%);

    background-size: 100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,40% 20%,2% 13%,100% 100%,15% 42%,15% 42%,90% 100%,24% 50%,24% 50%,100% 100%;

    background-position: 0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,50% 54%,50% 63%,0 0,23% 9%,77% 9%,50% 0,20% 0,80% 0,0 0;

} 

得到狗子图如下

通过设置定位，将狗子完美隐藏在熊熊们中。

div:after {

    left: 15em;

    top: 15em

}

当当~ 找茬图就完成啦！

赶快来编辑自己的找茬图并发给小伙伴们一起玩耍吧