[004]-css实现蝙蝠侠

最新推荐文章于 2025-08-12 15:30:12 发布

原创最新推荐文章于 2025-08-12 15:30:12 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #蝙蝠侠 #border-radius

css动画特效专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍如何使用HTML和CSS创建一个蝙蝠侠图标，包括头部、耳朵和眼睛的制作过程，以及过渡动画的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

蝙蝠侠

效果预览

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

最后大功告成