我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

兔子过大年——识别图片画兔

年岁初始，元气初旦。

我们期待生活中一切无恙，万事如意。

就像初升的阳光一样明媚，

这次带来的是利用CSS和JS结合实现的自适应图片后画出的一只大白兔：先放效果

底版是插入的html图片，上层的虚影是根据输入的图片画出的兔子轮廓

布局

对于CSS和JS的简单结合，我们可以把他理解为一个能够在浏览器里面跑的Word，只不过他和Word最大的差别就在于可以使用超链接Hyper-link在文档之间做跳转。由于不同浏览器或者页面布局的不同，导致其出现的大小结构会造成差异。

在做这个demo的基础是，先在body内插入一张图片，这里是为了庆祝兔年，用一只可爱的小兔子打底：

然后根据兔子的外部特征分别用线条进行勾勒

其中的细节都放在CSS中：

.container {
    width: 470px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    opacity: 0.4;
}
​
/*body*/
.animal-body {
    width: 314px;
    margin: 244px auto;
    height: 153px;
    border: 3px solid #000;
    border-top-left-radius: 200px;
    border-top-right-radius: 211px;
    z-index: 1;
    position: relative;
    border-bottom: 0;
}
​
.animal-body:after {
...}
​
/*ear*/
.right-ear {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    width: 51px;
    height: 89px;
    border: 4px solid #000000;
    position: absolute;
    left: 180px;
    top: -46px;
    border-bottom: 0;
    transform: rotate(12deg);
    background-color: #fff;
    z-index: 1;
}
​
.right-ear:after {
  ...
}
​
.left-ear {
    ...
}
​
.left-ear:after {
   ...
}
​
/*eye*/
.right-eye {
    ...
}
​
.right-eye:after {
...
}
​
.left-eye {
    ...
}
​
.left-eye:after {
    ...
}
​
/*node*/
.nose-left {
    width: 14px;
    height: 14px;
    border: 3px solid #000;
    border-top: 0;
    border-right: 0;
    border-bottom-left-radius: 50%;
    position: absolute;
    bottom: 79px;
    left: 163px;
    transform: rotate(-17deg);
}
​
.nose-right {
    ...
}
​
/*tail*/
.tail {
    width: 35px;
    height: 22px;
    background-color: #fff;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border: 3px solid #000;
    border-bottom: 0;
    position: absolute;
    top: 44px;
    right: 67px;
    transform: rotate(87deg);
}
​
.tail:before {
   ...
}

注意：

在勾勒框图时：为了避免图片溢出：我们可以

使用object-fit时，替换元素（视频，图）可以以多种方式被调整到合乎盒子的大小。

使用object-fit时，一定要有img元素的尺寸百分百。否则object-fit不生效。

且为了图片可以更加适配其他用户打开时的情况，推荐使用矢量图标： 好处：矢量图使用算法定义 — 一个矢量图文件包含了图形和路径的定义。 SVG 格式可以创造用于 Web 的精彩的矢量图形，而且放大网页不会模糊。

矢量图的定义——SVG

• SVG 是用于描述矢量图像的XML语言， SVG用于标记图形，而不是内容。
• SVG 指可伸缩矢量图形。
• XML 是可扩展标记语言是由 W3C 指定的一种通用标记语言。
• XML 标签 类似 HTML 标签，但 XML 允许用户定义自己的标签。

好啦，本次的分享暂且到这，祝各位新年快乐鸭