源代码下载

 

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

 

　　代码解读

 

　　定义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);

 

　　}

 

　　大功告成！






本文转载自中文网