资讯专栏INFORMATION COLUMN

前端每日实战:98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪

RyanQ / 3519人阅读

摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/VBGWqX

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cVweZAr

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含 3 个元素,分别代表耳朵、眼睛、鼻子:

</>复制代码

居中显示:

</>复制代码

  1. body {
  2. margin: 0;
  3. height: 100vh;
  4. display: flex;
  5. align-items: center;
  6. justify-content: center;
  7. background-color: skyblue;
  8. }

设置伪元素的共有属性,后面有多处用到伪元素:

</>复制代码

  1. .pig::before,
  2. .pig::after,
  3. .pig *::before,
  4. .pig *::after {
  5. content: "";
  6. position: absolute;
  7. }

定义容器尺寸:

</>复制代码

  1. .pig {
  2. width: 12em;
  3. height: 10em;
  4. font-size: 20px;
  5. background-color: #50a032;
  6. border: 0.2em solid #2b4d13;
  7. }

用圆角属性画出头部轮廓:

</>复制代码

  1. .pig {
  2. border-radius: 50% 50% 50% 50% / 55% 60% 40% 45%;
  3. }

画出鼻子的轮廓:

</>复制代码

  1. .pig {
  2. position: relative;
  3. }
  4. .nose {
  5. position: absolute;
  6. width: 4.6em;
  7. height: 4em;
  8. background-color: #82b923;
  9. border: 0.1em solid #1d3c07;
  10. border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%;
  11. top: 3em;
  12. left: 4.2em;
  13. }

用伪元素画出鼻孔:

</>复制代码

  1. .nose::before,
  2. .nose::after {
  3. width: 1.2em;
  4. background-color: #0f2d00;
  5. border-radius: 50%;
  6. top: 1.4em;
  7. }
  8. .nose::before {
  9. left: 0.8em;
  10. height: 1.8em;
  11. }
  12. .nose::after {
  13. right: 0.8em;
  14. height: 1.6em;
  15. }

画出眼睛的轮廓:

</>复制代码

  1. .eyes::before,
  2. .eyes::after {
  3. width: 2.8em;
  4. height: 2.8em;
  5. background: white;
  6. border-radius: 50%;
  7. border: 0.1em solid #193c09;
  8. top: 3.6em;
  9. }
  10. .eyes::before {
  11. left: 0.8em;
  12. }
  13. .eyes::after {
  14. right: 0.3em;
  15. }

用径向渐变画出眼珠:

</>复制代码

  1. .eyes::before,
  2. .eyes::after {
  3. background:
  4. radial-gradient(
  5. circle at var(--eyeball-left) 1.5em,
  6. black 0.4em,
  7. transparent 0.4em
  8. ),
  9. white;
  10. }
  11. .eyes::before {
  12. --eyeball-left: 1em;
  13. }
  14. .eyes::after {
  15. --eyeball-left: 1.9em;
  16. }

画出内耳的轮廓:

</>复制代码

  1. .ears::before,
  2. .ears::after {
  3. width: 0.8em;
  4. height: 0.9em;
  5. background-color: #2f6317;
  6. border: 0.1em solid #1d3a0d;
  7. border-radius: 45% 45% 45% 45% / 55% 45% 55% 45%;
  8. }
  9. .ears::before {
  10. top: 0.3em;
  11. left: 1.3em;
  12. }
  13. .ears::after {
  14. top: -1.1em;
  15. right: 5.8em;
  16. }

用阴影画出外耳:

</>复制代码

  1. .ears::before {
  2. color: #50a032;
  3. box-shadow:
  4. 0.4em 0.7em 0 -0.2em,
  5. -0.2em 0.7em 0 -0.1em,
  6. -0.6em 0.5em 0 -0.2em,
  7. -0.1em -0.2em 0 0.4em,
  8. -0.1em -0.2em 0 0.6em #2b4d13;
  9. transform: rotate(-40deg);
  10. }
  11. .ears::after {
  12. color: #5cb739;
  13. box-shadow:
  14. 0.3em 0.6em 0 -0.2em,
  15. -0.1em 0.6em 0 -0.1em,
  16. -0.6em 0.6em 0 -0.2em,
  17. -0.1em -0.2em 0 0.4em,
  18. -0.1em -0.2em 0 0.6em #2b4d13;
  19. transform: rotate(-6deg);
  20. }

用伪元素画出眉毛:

</>复制代码

  1. .pig::before,
  2. .pig::after {
  3. width: 1.4em;
  4. height: 1em;
  5. border-top: 0.5em solid #0f2d00;
  6. top: 2.3em;
  7. border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  8. }
  9. .pig::before {
  10. left: 1.2em;
  11. transform: rotate(-20deg);
  12. }
  13. .pig::after {
  14. right: 1em;
  15. transform: rotate(25deg);
  16. }

接下来设置阴影,增加立体效果。
为头部增加阴影效果:

</>复制代码

  1. .pig {
  2. box-shadow:
  3. inset -1.5em 1em 1.5em -0.5em rgba(255, 255, 255, 0.3),
  4. inset 0.5em -0.5em 0.8em 0.2em rgba(0, 0, 0, 0.2);
  5. }

为鼻子增加阴影效果:

</>复制代码

  1. .nose {
  2. box-shadow: -0.1em 0.5em 0.2em 0.1em rgba(68, 132, 36, 0.6);
  3. }
  4. .nose::before,
  5. .nose::after {
  6. box-shadow: inset -0.3em -0.2em 0.1em -0.1em #2d6b1f;
  7. }

为眼睛增加阴影效果:

</>复制代码

  1. .eyes::before,
  2. .eyes::after {
  3. box-shadow:
  4. inset 0.3em -0.6em 0.5em -0.2em rgba(0, 0, 0, 0.3),
  5. -0.1em 0.5em 0.2em 0.1em rgba(68, 132, 36, 0.6);
  6. }

大功告成!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52821.html

相关文章

  • 前端每日实战98# 视频演示何用 CSS 创作一只愤怒小鸟中的绿猪

    摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbeUYJ?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehop...

    FingerLiu 评论0 收藏0
  • 前端每日实战:110# 视频演示何用 CSS 创作一只愤怒小鸟中的黑炮

    摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。为头部增加阴影为嘴增加阴影大功告成 showImg(https://segmentfault.com/img/bVbfxoZ?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://c...

    Lionad-Morotar 评论0 收藏0
  • 前端每日实战:110# 视频演示何用 CSS 创作一只愤怒小鸟中的黑炮

    摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。为头部增加阴影为嘴增加阴影大功告成 showImg(https://segmentfault.com/img/bVbfxoZ?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://c...

    PrototypeZ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<