使用for循环编程js代码，页面效果显示下面图案？

来源：蜘蛛抓取(WebSpider) 时间：2022-06-05 08:57 标签： css鼠标悬停文字时显示图片
冰墩墩（英文：Bing Dwen Dwen，汉语拼音：bīng dūn dūn），是 的吉祥物。 [3] 将熊猫形象与富有超能量的冰晶外壳相结合，头部外壳造型取自冰雪运动头盔，装饰彩色光环，整体形象酷似航天员。

以前面试总被问，如何用 CSS 画一个三角形。今天我想玩点大的，用 CSS 画个冰墩墩！

我们可以把各个部分拆成 div，再给 div 分别做 CSS，最终拼成整幅图。

对这个分法你可能有很多问号，比如：

  • 一个 div 能画出这么复杂的东西？
  • 为什么两只眼睛分一个 div ？为什么瞳孔反而要单独分？

后面的操作会给你答案。

然后我们给所有 div 一个绝对定位：

这样就像 sketch、ps 一样，我们有了很多图层。绝对定位下，图层是有上下顺序的，这也是前面划分结构的一个依据。

但 CSS 的能力不止于此，通过伪元素，一个 div 理论上可以提供三个图层：自身、before、after。我们给他们也统一加上。

接下来我们要挨个部分画图了，其中夹杂引入属性的简单说明，一口饭一口菜。

冰墩墩的身体是一个类似蛋的形状，头顶要比脚下圆润些，这个好做，一组 border + radius 搞定。

四个角的 radius 可以单独设置，每个 radius 又可以单独设置两个方向的。

耳朵也差不多，两个蛋，放在一个 div 里，因为我们前面说过，一个 div 至多可以提供三个图层

因为 div 顺序靠前，下半部分正好被身体压掉。

左手类似一个水滴的形状，看似可以尝试比较大的 border radius，但实际行不通，可以用一个圆形 + 一个三角形拼起来。其中三角形用 border 实现。

右手是一个椭圆 + 一颗心（拆成两个椭圆拼起来），三个图层正好够用。又引入了 transform rotate 属性。

除了 rotate，skew 也常用来实现菱形等。

这个脚看起来有点难办，虽然是圆角类似椭圆，但几个方向比较刁钻。这里果断拆分成两部分，一部分堆在身体下，一部分堆在身体上。稍微调整下 html。

发现没，两只脚对称，这里的元素本身定到中间，本身没什么意义，但两伪元素就可以对称写了，非常方便。

正好和身体下的部分叠在一起。

脸的轮廓是几圈彩色套在一起的。

一圈好办，给个border就好了；三圈也好办，大不了用两个伪元素。更多圈怎么办呢？我们可以用 box-shadow。

box-shadow 可以无限次声明同一个元素的阴影，并可以自定义偏移、扩展、颜色。

这就很有想象空间了，像一个复印机：

  • 调整扩展，可以无限增加元素的 border 层数，比如上面的用法。
  • 调整偏移，可以把元素形状复制到任意位置。
  • 关键是，任何一次复印都可以单独改变颜色！

这个本来也挺简单，对称两个带 border 的圆，但有一个小细节，就是瞳孔上水灵灵的眼光，是不对称的。

那怎么办？div 自己居中定位不是闲着么，让他用 box-shadow 打出来就好了。

至此，冰墩墩就画完了。

快学去哄抢不到冰墩墩的小朋友吧～～

附：完整代码 + 度熊，欢迎一起玩耍

我要回帖

更多关于 css鼠标悬停文字时显示图片 的文章

 

随机推荐