效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 4 个元素:
<figure class="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); } .duck span { background-color: seagreen; }
把容器旋转 45 度:
.duck { transform: rotate(-45deg); }
设置每个正方形的圆角,组合成一只鸭子的抽象形状:
.duck span:nth-child(1) { border-top-left-radius: 100%; } .duck span:nth-child(2) { border-top-right-radius: 100%; } .duck span:nth-child(3) { border-bottom-right-radius: 100%; } .duck span:nth-child(4) { border-bottom-left-radius: 100%; }
为最后一个方块设置有差异的颜色,使它看起来像鸭子嘴:
.duck span:nth-child(4) { background-color: coral; }
在第 2 个方块用径向渐变画出一个圆点,代表鸭子的眼睛:
.duck span:nth-child(2) { background-image: radial-gradient(black 0.5em, transparent 0.5em); }
大功告成!
相关推荐:
以上就是如何使用CSS实现一只鸭子头(附代码)的详细内容,更多请关注php中文网其它相关文章!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论