效果预览
https://codepen.io/strugglingBoy/pen/jeGJxZ
代码下载
https://github.com/enstrongbill/daily-frontend-exercise/tree/master/027-batman
代码解读
蝙蝠侠是通过一个圆形和四个三角形所形成的
1.html代码
定义了一个.batman的容器(用于画出蝙蝠侠的脸),两个耳朵是通过伪元素实现的
<div class="batman">
<div class="eyes"></div>
</div>
2.css代码
蝙蝠侠头部的制作(利用border-radius)
.batman {
background: #000;
width: 50vw;
height: 50vw;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
transition: transform 100ms ease-out;
}
蝙蝠侠耳朵的制作(利用border来制作)
.batman::before {
content: "";
width: 0;
height: 0;
position: absolute;
transform: translate(1%, -25%);
border-left: 2vw solid transparent;
border-right: 20vw solid transparent;
border-bottom: 30vw solid #000;
}
蝙蝠侠眼睛的制作(同样利用border来制作)
.eyes::before {
content: "";
position: absolute;
top: 61%;
left: 50%;
width: 0;
height: 0;
transform: rotate(-37deg) translate(46%, 0%);
border-style: solid;
border-width: 5vw 0 0 12vw;
border-color: transparent transparent transparent #cecece;
}
蝙蝠侠过度动画的制作
.batman:hover {
transform: translate(-50%, 25%);
}
最后大功告成