源代码下载

 

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

 

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

 

　　代码解读

 

　　定义dom，容器表示整只蝴蝶，因为蝴蝶是对称的，所以分为左右两边，每边有3个子元素：

 

　　<divclass="butterfly">

 

　　<divclass="left">

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　</div>

 

　　<divclass="right">

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　</div>

 

　　</div>

 

　　居中显示：

 

　　body{

 

　　margin:0;

 

　　height:100vh;

 

　　display:flex;

 

　　align-items:center;

 

　　justify-content:center;

 

　　background:linear-gradient(gray,lightyellow,gray);

 

　　}

 

　　定义蝴蝶的尺寸：

 

　　.butterfly{

 

　　position:relative;

 

　　width:10em;

 

　　height:10em;

 

　　}

 

　　先画左半边：

 

　　.butterfly.left{

 

　　position:absolute;

 

　　width:inherit;

 

　　height:inherit;

 

　　}

 

　　用第1个子元素画出翅膀的上半部分：

 

　　.butterflyspan{

 

　　position:absolute;

 

　　border-radius:50%;

 

　　}

 

　　.butterflyspan:nth-child(1){

 

　　width:5em;

 

　　height:7em;

 

　　background-color:gold;

 

　　}

 

　　用第2个子元素画出翅膀的下半部分：

 

　　.butterflyspan:nth-child(2){

 

　　width:5.5em;

 

　　height:3.5em;

 

　　background-color:orangered;

 

　　top:5em;

 

　　left:-2.5em;

 

　　filter:opacity(0.6);

 

　　}

 

　　用第3个子元素画出触角：

 

　　.butterflyspan:nth-child(3){

 

　　width:6em;

 

　　height:6em;

 

　　border-right:0.3emsolidorangered;

 

　　top:-0.5em;

 

　　}

 

　　把左半边复制一份到右半边：

 

　　.butterfly.right{

 

　　position:absolute;

 

　　width:inherit;

 

　　height:inherit;

 

　　}

 

　　.butterfly.right{

 

　　transform:rotateY(180deg)rotate(-90deg);

 

　　top:0.4em;

 

　　left:0.4em;

 

　　}

 

　　把标本装到展示框里：

 

　　

 

　　.butterfly::before{

 

　　content:'';

 

　　position:absolute;

 

　　box-sizing:border-box;

 

　　top:-2.5em;

 

　　left:-8em;

 

　　width:24em;

 

　　height:18em;

 

　　background-color:black;

 

　　border:0.2eminsetsilver;

 

　　}

 

　　.butterfly::after{

 

　　content:'';

 

　　position:absolute;

 

　　box-sizing:border-box;

 

　　width:40em;

 

　　height:30em;

 

　　background-color:lightyellow;

 

　　top:-9em;

 

　　left:-16em;

 

　　border:2emsolidburlywood;

 

　　border-radius:3em;

 

　　box-shadow:

 

　　00.3em2em0.4emrgba(0,0,0,0.3),

 

　　inset0.4em0.4em0.1em0.5emrgba(0,0,0,.4);

 

　　z-index:-1;

 

　　}

 

　　最后，调整一下因图案倾斜引起的位移：

 

　　.butterfly{

 

　　transform:translateX(1em);

 

　　}







本文转载自中文网