使用CSS实现一只鸭子头的方法
小编给大家分享一下使用CSS实现一只鸭子头的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司是一家专注于成都做网站、网站制作与策划设计,延安网站建设哪家好?成都创新互联公司做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:延安等地区。延安做网站价格咨询:13518219792
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 4 个元素:
居中显示:
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实现一只鸭子头的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
名称栏目:使用CSS实现一只鸭子头的方法
本文网址:http://scyanting.com/article/gijeig.html