我们不仅完成了一个流畅的悬停动画，而且只用了一个<img>元素和不到20行的CSS技巧！如果我们允许自己使用更多的HTML，我们能简化CSS吗？当然可以。但我们是来学习CSS新技巧的!这是一个很好的练习，可以探索CSS渐变、遮罩、outline属性的行为

国庆节马上就要到了，大家换个喜庆的头像庆祝祖国诞辰蛮好的！献上我们的祝福，好好学习，努力工作，认真生活，让我们一起为祖国的明天而努力。

在 web 中经常会见到这样的设计，很多 UI 组件库也称之为 Avator 组件，也就是头像的意思，当头像未设置时，会显示名称的首字符充当默认头像，如下所示：

今天是国庆节，大家都在为庆祝祖国的生日而着急。每年这个时候，微信朋友圈都会流行用旗子装饰头像，那么，如何通过将国旗图片与我们的头像结合来快速得到想要的头像，如何简单的用CSS实现呢？