系统自带的字体图标（2）

真的发现 CSS 的 content 是个极品，最近还发现了另两款好玩的应用方式（第一期可点这里）

确认

确认

确认

确认

确认

确认

确认

Go

看呀，全靠 css 的 content 和 animation 来实现哟，多么简单，比如 （cnblog 把我的动画屏蔽掉了）

.loading.earth::after {
  content: "🌍\A🌎\A🌏";
  -webkit-animation: spin3 1s steps(3) infinite;
          animation: spin3 1s steps(3) infinite;
  width: 1.3em;
}

 

另一个则是表情包，看图吧，贴代码量有点大

也是很简单的，看一眼就会，（想背的话还是有难度的说，就是找起来比较麻烦）

<div class="icon-1"></div>

<style>
.icon-1:after {content: "\1F600"; }
</style>

然后你就能得到一个笑脸了，虽然各个设备上可能会有些样子不太一样，但表情包嘛，意思到了就行咯。（已经实验过较多机型，去掉了大量不兼容的表情）