“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

前言

女巫（Witch），是西方文化中使用巫术、魔法、占星术并且以此类超自然能力行事的女性，据传说分为白女巫与黑女巫两种，白女巫使用白魔法，黑女巫使用黑魔法。与此相对，会使用魔法的男性则称之为男巫（Wizard, Warlock）。

实现

布局

<div class="css_lab">
  <div class="witch">
    <div></div><div></div>
    <div></div><div></div>
    <div></div><div></div>
    <div></div><div></div>
    <div></div><div></div>
    <div></div><div></div>
    <div></div><div></div>
  </div>
</div>

样式

女巫的拖布

.witch div:nth-child(1){
	width:80px;
	height:3px;
	background:#224;
	margin-top:-0.5px;
	border-radius:3px;
	transform:rotate(14deg);
}
.witch div:nth-child(1):before{
	width:20px;
	height:20px;
	background:#224;
	right:-20px;
	top:-9px;
	border-radius:50px 0 45px 20px/45px 0 50px 20px;
	transform:rotate(45deg);
}
.witch div:nth-child(1):after{
	width:25px;
	height:18px;
	right:-25px;
	top:-15px;
	border-bottom:5px solid #224;
	border-radius:45%;
	transform:rotate(-30deg);
}
.witch div:nth-child(12):after{
	width:0;
	height:4px;
	top:23px;
	left:39px;
	border-top:1px solid transparent;
	border-bottom:1px solid transparent;
	border-left:3px solid #224;
	transform:rotate(-34deg);
}

女巫的躯干

.witch div:nth-child(2){
	width:11px;
	height:18px;
	margin-top:-22px;
	left:70px;
	background:#224;
	border-radius:50px 20px 20px 40px/50px 23px 5px 61px;
	transform:rotate(-23deg);
}
.witch div:nth-child(2):before,
.witch div:nth-child(2):after{
	width:12px;
	height:17px;
	background:#224;
	left:1px;
	top:18px;
	border-radius:0 60px 70px 0/0 60px 45px 0;
	transform:rotate(64deg);
}
.witch div:nth-child(2):after{
	width:10px;
	height:10px;
	left:-1px;
	top:3px;
	border-radius:3px;
	transform:rotate(42deg);
}

女巫的头和帽子

.witch div:nth-child(3){
	width:16px;
	height:18px;
	background:#224;
	left:65px;
	margin-top:-42px;
	border-radius:40px 0 30px 10px/33px 0 30px 35px;
}
.witch div:nth-child(3):before{
	width:4px;
	height:0px;
	margin-top:-12px;
	margin-left:8px;
	border-radius:30px 0 0 0;
	transform:rotate(37deg);
	border-left:10px solid transparent;
	border-right:2px solid transparent;
	border-bottom:20px solid #224;
}
.witch div:nth-child(3):after{
	width:39px;
	height:8px;
	border-bottom:6px solid #224;
	border-radius:0 0 30px 30px/0 0 15px 15px;
	left:-9px;
	top:-3px;
	transform:rotate(37deg);
}
.witch div:nth-child(4){
	width:6px;
	height:8px;
	margin-left:51px;
	margin-top:-26px;
	background:#224;
	transform:rotate(-15deg);
}
.witch div:nth-child(4):before{
	left:7px;
	top:6px;
	width:23px;
	height:17px;
	border-top:4px solid #224;
	border-radius:0 50% 0 0;
	transform:rotate(20deg);
}
.witch div:nth-child(4):after{
	width:4px;
	height:7px;
	background:#224;
	border-radius:1px;
	left:-3px;
	top:-11px;
	transform:rotate(45deg) skewX(-10deg);
}

女巫的油灯

.witch div:nth-child(13){
	width:12px;
	height:15px;
	border:1px solid #224;
	border-radius:8px 8px 10px 10px/17px 17px 6px 7px;
	margin-top:0;
	margin-left:7px;
	transform:rotate(-20deg);
}
.witch div:nth-child(13):before{
	width:10px;
	height:3px;
	border-radius:8px 8px 0 0;
	margin-top:13px;
	margin-left:0.5px;
	background:#224;
}
.witch div:nth-child(13):after{
	width:12px;
	height:3px;
	border-radius:50%;
	margin-top:15px;
	margin-left:-0.5px;
	background:#224;
}

总结

整篇主要用到的是css的transform属性的旋转,@keyframes动画,相对定位，堆叠顺序,阴影,径向渐变,透明度,以上这些内容组合成的像女巫,谢谢观看!

点个赞吧 球球了φ(>ω<*)