[004]-css实现蝙蝠侠

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/strongbill/article/details/83114322

效果预览

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%);
}

最后大功告成