怎样使用CSS实现一只鸭子头

发布时间:2022-02-24 14:36:58 作者:小新
来源:亿速云 阅读:117

这篇文章将为大家详细讲解有关怎样使用CSS实现一只鸭子头,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

  代码解读

  定义dom,容器中包含4个元素:

  <figureclass="duck">

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  </figure>

  居中显示:

  body{

  margin:0;

  height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  background-color:papayawhip;

  }

  定义容器尺寸:

  .duck{

  width:10em;

  height:10em;

  }

  用grid把4个方块按2*2布局:

  .duck{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  }

  .duckspan{

  background-color:seagreen;

  }

  把容器旋转45度:

  .duck{

  transform:rotate(-45deg);

  }

  设置每个正方形的圆角,组合成一只鸭子的抽象形状:

  .duckspan:nth-child(1){

  border-top-left-radius:100%;

  }

  .duckspan:nth-child(2){

  border-top-right-radius:100%;

  }

  .duckspan:nth-child(3){

  border-bottom-right-radius:100%;

  }

  .duckspan:nth-child(4){

  border-bottom-left-radius:100%;

  }

  为最后一个方块设置有差异的颜色,使它看起来像鸭子嘴:

  .duckspan:nth-child(4){

  background-color:coral;

  }

  在第2个方块用径向渐变画出一个圆点,代表鸭子的眼睛:

  .duckspan:nth-child(2){

  background-image:radial-gradient(black0.5em,transparent0.5em);

  }

  大功告成!

怎样使用CSS实现一只鸭子头怎样使用CSS实现一只鸭子头

关于“怎样使用CSS实现一只鸭子头”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. 怎么使用纯CSS实现一只会动的手
  2. 怎么使用纯CSS实现一只纸鹤

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:css3+html5如何制作文字霓虹灯效果

下一篇:css3怎么实现图片的简单阴影效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》