记洛克狗的实现过程

1. 实现目标

 + 用纯CSS代码展示洛克狗
 + 效果图
  ![](https://img2020.cnblogs.com/blog/960293/202007/960293-20200717143956082-1030649366.png)

2. 实现过程

 + 思路:      
        + 将图片划分为N个部分
        + 将多个部分组合在一起
 + 要点
        + z-index
        + border-radius
        + transform : translate() rotate()
        + transform : scale(-1,1) translate() rotate()

3. 代码实现

  + 关键代码
       `.forehead{
	width: 102px;
	height: 48px;
	background-color: var(--bg);
            border-radius: 51px / 40px 40px 8px 8px;
            z-index: 1;
    }`
posted @ 2020-07-17 14:46  小小小疯子  阅读(86)  评论(0编辑  收藏  举报