如何使用CSS画胡子?

如果想要使用CSS绘制胡子样式,这要怎么画?下面本篇文章就来给大家介绍一下使用CSS绘制胡子效果的方法,希望对大家有所帮助。

绘制胡子的步骤:

步骤1:创建一个黑色圆,圆角半径为50%,宽度和高度为180px

为了保持圆在中间,在左边加350px;为了要使圆可见,可添加背景色作为当前颜色。使用CurrentColor值的好处是更改颜色徽标,以便自动更改背景。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>胡子</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			.mustache {
				width: 180px;
				height: 180px;
				left: 350px;
				border-radius: 50%;
				position: absolute;
				color: black;
				background-color: currentColor;
			}
		</style>
	</head>

	<body>
		<div class="mustache"></div>
	</body>

</html>

效果图:

5574d967061a6cab82e72aac36007b4.png

步骤2:使用box-shadow添加框阴影,使页面中间有两个圆

css样式

.mustache {
	width: 180px;
	height: 180px;
	left: 350px;
	border-radius: 50%;
	position: absolute;
	color: black;
	box-shadow: 
        150px 240px 0 0 currentColor, 
        300px 240px 0 0 currentColor;
}

效果图:

2bb3960811746b8b2427996a8bf7b01.png

步骤3:使用::before元素添加左胡须

● 将::before元素添加到div,并添加position, top,width, height, border。

● 同时添加border-radius属性,直到弧线需要形成胡须。

● 固定旋转原点,使左胡须末端准确到达,然后以-40度角旋转。

添加.mustache::before样式

.mustache::before{ 
    content:""; 
    position:absolute; 
    left:30px; 
    top:120px; 
    width:210px; 
    height:120px; 
    border-bottom:solid 180px currentColor; 
    border-radius:0 0 0 100%; 
    transform:rotate(-40deg); 
    transform-origin:right 210px; 
}

效果图:

e43983b0fd6681c4010275c8bd41493.png

步骤4:使用::after元素添加右胡须

● 将::after元素添加到div,并添加position, top,width, height, border。

● 同时添加border-radius属性,直到弧线需要形成胡须。

● 固定旋转原点,使右胡须末端准确到达,然后以40度角旋转。

添加.mustache::after样式

.mustache::after{ 
    content:""; 
    position:absolute; 
    left:390px; 
    top:120px; 
    width:210px; 
    height:120px; 
    border-bottom:solid 180px currentColor; 
    border-radius:0 0 100%0; 
    transform:rotate(40deg); 
    transform-origin:left 210px; 
}

效果图:

58978fff2803d18225c1982a541c0bb.png

以上就是如何使用CSS画胡子?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏