×

CSS3绘制图形应用:如何使用 CSS3 创建 Gmail 徽标

作者:Web前端之家2021.08.19来源:Web前端之家浏览:390评论:0
关键词:css3html5
微信公众号

微信公众号

CSS3绘制图形应用:如何使用 CSS3 创建 Gmail 徽标。上代码吧。

<!DOCTYPE HTML>    
<html>    
	<head>    
		<title>CSS3绘制图形应用:如何使用 CSS3 创建 Gmail 徽标 | Web前端之家www.jiangweishan.com</title>    
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">    
		<style type="text/css">    
<!--		/* CSS */    
/*    
-moz- > firefox    
-o- > opera    
-webkit > webkit(chrome, safari)    
-ms- > MSIE8+    
*/    
body{    
	padding:200px 0;    
	}    
#gmail-logo2{    
	margin:0 auto;    
	display:block;    
	width:380px;    
	height:290px;    
	-moz-transform:rotate(6deg);    
	-webkit-transform:rotate(6deg);    
	-o-transform:rotate(6deg);    
	transform:rotate(6deg);    
	-ms-transform:rotate(6deg);    
	}    
#gmail-logo2 .element1{    
	display:block;    
	width:380px;    
	height:290px;    
	}    
#gmail-logo2 .element2 ,    
#gmail-logo2 .element3,    
#gmail-logo2 .element4,    
#gmail-logo2 .element5 {    
	float:left;    
	display:block;    
	width:380px;    
	height:290px;    
	margin:-290px 0 0 0;    
	}	    
#gmail-logo2 .element1::before{    
	content:'';    
	position:relative;    
	margin:2px 0 0 14px;    
	float:left;    
	display:block;    
	background:rgb(201, 44, 25);    
	width:30px;    
	height:276px;    
	-moz-transform:rotate(3deg);    
	-webkit-transform:rotate(3deg);    
	-o-transform:rotate(3deg);    
	transform:rotate(3deg);    
	-ms-transform:rotate(3deg);    
	border-radius:22px 0 0 20px;    
	-moz-border-radius:22px 0 0 20px;    
	-webkit-border-radius:22px 0 0 20px;    
	box-shadow:    
		-1px 1px 0 rgb(109, 10, 0),    
		-2px 2px 0 rgb(109, 10, 0),    
		-3px 3px 0 rgb(109, 10, 0),    
		-4px 4px 0 rgb(109, 10, 0),    
		-5px 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);    
	-webkit-box-shadow:    
		-1px 1px 0 rgb(109, 10, 0),    
		-2px 2px 0 rgb(109, 10, 0),    
		-3px 3px 0 rgb(109, 10, 0),    
		-4px 4px 0 rgb(109, 10, 0),    
		-5px 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);    
	-moz-box-shadow:    
		-1px 1px 0 rgb(109, 10, 0),    
		-2px 2px 0 rgb(109, 10, 0),    
		-3px 3px 0 rgb(109, 10, 0),    
		-4px 4px 0 rgb(109, 10, 0),    
		-5px 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);    
	}    
#gmail-logo2 .element1::after{    
	content:'';    
	position:relative;    
	margin:40px 5px 0 0;    
	float:right;    
	display:block;    
	background:rgb(201, 44, 25);    
	width:30px;    
	height:238px;    
	-moz-transform:rotate(3deg);    
	-webkit-transform:rotate(3deg);    
	-o-transform:rotate(3deg);    
	transform:rotate(3deg);    
	-ms-transform:rotate(3deg);    
	border-radius:0 18px 26px 0;    
	-webkit-border-radius:0 18px 26px 0;    
	-moz-border-radius:0 18px 26px 0;    
	box-shadow:    
		-1px 1px 0 rgb(109, 10, 0),    
		-2px 2px 0 rgb(109, 10, 0),    
		-3px 3px 0 rgb(109, 10, 0),    
		-4px 4px 0 rgb(109, 10, 0),    
		-5px 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0),    
		-6px 7px 0 rgb(109, 10, 0);    
	-moz-box-shadow:    
		-1px 1px 0 rgb(109, 10, 0),    
		-2px 2px 0 rgb(109, 10, 0),    
		-3px 3px 0 rgb(109, 10, 0),    
		-4px 4px 0 rgb(109, 10, 0),    
		-5px 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0),    
		-6px 7px 0 rgb(109, 10, 0);    
	-webkit-box-shadow:    
		-1px 1px 0 rgb(109, 10, 0),    
		-2px 2px 0 rgb(109, 10, 0),    
		-3px 3px 0 rgb(109, 10, 0),    
		-4px 4px 0 rgb(109, 10, 0),    
		-5px 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0),    
		-6px 7px 0 rgb(109, 10, 0);    
	}    
#gmail-logo2 .element2::before{    
	content:'';    
	margin:22px 0 0 48px;    
	float:left;    
	display:block;    
	background:rgb(201, 44, 25);    
	width:315px;    
	height:14px;    
	-moz-transform:rotate(6.8deg);    
	-webkit-transform:rotate(6.8deg);    
	-o-transform:rotate(6.8deg);    
	transform:rotate(6.8deg);    
	-ms-transform:rotate(6.8deg);    
	box-shadow:    
		0 1px 0 rgb(109, 10, 0),    
		0 2px 0 rgb(109, 10, 0),    
		0 3px 0 rgb(109, 10, 0),    
		0 4px 0 rgb(109, 10, 0),    
		0 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);    
	-webkit-box-shadow:    
		0 1px 0 rgb(109, 10, 0),    
		0 2px 0 rgb(109, 10, 0),    
		0 3px 0 rgb(109, 10, 0),    
		0 4px 0 rgb(109, 10, 0),    
		0 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);    
	-moz-box-shadow:    
		0 1px 0 rgb(109, 10, 0),    
		0 2px 0 rgb(109, 10, 0),    
		0 3px 0 rgb(109, 10, 0),    
		0 4px 0 rgb(109, 10, 0),    
		0 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);    
	}    
#gmail-logo2 .element2::after{    
	content:'';    
	position:relative;    
	margin:230px 0 0 36px;    
	float:left;    
	display:block;    
	background:rgb(201, 44, 25);    
	width:310px;    
	height:12px;    
	box-shadow:    
		0 1px 0 rgb(109, 10, 0),    
		0 2px 0 rgb(109, 10, 0),    
		0 3px 0 rgb(109, 10, 0),    
		0 4px 0 rgb(109, 10, 0),    
		0 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);    
	-webkit-box-shadow:    
		0 1px 0 rgb(109, 10, 0),    
		0 2px 0 rgb(109, 10, 0),    
		0 3px 0 rgb(109, 10, 0),    
		0 4px 0 rgb(109, 10, 0),    
		0 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);    
	-moz-box-shadow:    
		0 1px 0 rgb(109, 10, 0),    
		0 2px 0 rgb(109, 10, 0),    
		0 3px 0 rgb(109, 10, 0),    
		0 4px 0 rgb(109, 10, 0),    
		0 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);	    
	}    
#gmail-logo2 .element3::before{    
	content:'';    
	position:relative;    
	margin:8px 0 0 42px;    
	float:left;    
	display:block;    
	background:rgb(201, 44, 25);    
	width:42px;    
	height:268px;    
	-moz-transform:rotate(3deg);    
	-webkit-transform:rotate(3deg);    
	-o-transform:rotate(3deg);    
	transform:rotate(3deg);    
	-ms-transform:rotate(3deg);    
	}    
#gmail-logo2 .element3::after{    
	content:'';    
	position:relative;    
	margin:40px 32px 0 0;    
	float:right;    
	display:block;    
	background:rgb(201, 44, 25);    
	width:22px;    
	height:236px;    
	-moz-transform:rotate(3.0deg);    
	-webkit-transform:rotate(3.0deg);    
	-o-transform:rotate(3.0deg);    
	transform:rotate(3.0deg);    
	-ms-transform:rotate(3.0deg);    
	box-shadow:    
		0 1px 0 rgb(109, 10, 0),    
		0 2px 0 rgb(109, 10, 0),    
		0 3px 0 rgb(109, 10, 0),    
		0 4px 0 rgb(109, 10, 0),    
		0 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);    
	-webkit-box-shadow:    
		0 1px 0 rgb(109, 10, 0),    
		0 2px 0 rgb(109, 10, 0),    
		0 3px 0 rgb(109, 10, 0),    
		0 4px 0 rgb(109, 10, 0),    
		0 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);    
	-moz-box-shadow:    
		0 1px 0 rgb(109, 10, 0),    
		0 2px 0 rgb(109, 10, 0),    
		0 3px 0 rgb(109, 10, 0),    
		0 4px 0 rgb(109, 10, 0),    
		0 5px 0 rgb(109, 10, 0),    
		-6px 6px 0 rgb(109, 10, 0);    
	}    
#gmail-logo2 .element4::before{    
	content:'';    
	position:relative;    
	margin:-2px 0 0 130px;    
	float:left;    
	display:block;    
	background:rgb(201, 44, 25);    
	width:54px;    
	height:192px;    
	-moz-transform:rotate(-49deg);    
	-webkit-transform:rotate(-49deg);    
	-o-transform:rotate(-49deg);    
	transform:rotate(-49deg);    
	-ms-transform:rotate(-49deg);    
	box-shadow:    
		-1px 0 0 rgb(109, 10, 0),    
		-2px 0 0 rgb(109, 10, 0),    
		-3px 0 0 rgb(109, 10, 0),    
		-4px 0 0 rgb(109, 10, 0),    
		-5px 0 0 rgb(109, 10, 0),    
		-6px 0 0 rgb(109, 10, 0),    
		-7px 0 0 rgb(109, 10, 0),    
		-8px 0 0 rgb(109, 10, 0);    
	-moz-box-shadow:    
		-1px 0 0 rgb(109, 10, 0),    
		-2px 0 0 rgb(109, 10, 0),    
		-3px 0 0 rgb(109, 10, 0),    
		-4px 0 0 rgb(109, 10, 0),    
		-5px 0 0 rgb(109, 10, 0),    
		-6px 0 0 rgb(109, 10, 0),    
		-7px 0 0 rgb(109, 10, 0),    
		-8px 0 0 rgb(109, 10, 0);    
	-webkit-box-shadow:    
		-1px 0 0 rgb(109, 10, 0),    
		-2px 0 0 rgb(109, 10, 0),    
		-3px 0 0 rgb(109, 10, 0),    
		-4px 0 0 rgb(109, 10, 0),    
		-5px 0 0 rgb(109, 10, 0),    
		-6px 0 0 rgb(109, 10, 0),    
		-7px 0 0 rgb(109, 10, 0),    
		-8px 0 0 rgb(109, 10, 0);    
	}    
#gmail-logo2 .element4::after{    
	content:'';    
	position:relative;    
	margin:12px 88px 0 0;    
	float:right;    
	display:block;    
	background:rgb(201, 44, 25);    
	width:54px;    
	height:186px;    
	border-radius:30px 0 0 0;    
	-webkit-border-radius:30px 0 0 0;    
	-moz-border-radius:30px 0 0 0;    
	-moz-transform:rotate(53deg);    
	-webkit-transform:rotate(53deg);    
	-o-transform:rotate(53deg);    
	transform:rotate(53deg);    
	-ms-transform:rotate(53deg);    
	}    
#gmail-logo2 .element5::before{    
	content:'';    
	position:relative;    
	margin:115px 0 0 125px;    
	float:left;    
	display:block;    
	background:rgb(201, 44, 25);    
	width:2px;    
	height:150px;    
	-moz-transform:rotate(55deg);    
	-o-transform:rotate(55deg);    
	-webkit-transform:rotate(55deg);    
	transform:rotate(55deg);    
	-ms-transform:rotate(55deg);    
	}    
#gmail-logo2 .element5::after{    
	position:relative;    
	content:'';    
	margin:115px 0 0 150px;    
	float:left;    
	display:block;    
	background:rgb(201, 44, 25);    
	width:2px;    
	height:150px;    
	-moz-transform:rotate(-50deg);    
	-webkit-transform:rotate(-50deg);    
	-o-transform:rotate(-50deg);    
	transform:rotate(-50deg);    
	-ms-transform:rotate(-50deg);    
	}    
#gmail-logo2 .element1::before{z-index:3;}/* 4 */    
#gmail-logo2 .element1::after{z-index:1;}/* 7 */    
#gmail-logo2 .element2::before{}/* 10 */    
#gmail-logo2 .element2::after{z-index:2;}/* 5 */    
#gmail-logo2 .element3::before{z-index:5;}/* 1 */    
#gmail-logo2 .element3::after{z-index:1;}/* 6 */    
#gmail-logo2 .element4::before{z-index:4;}/* 2 */    
#gmail-logo2 .element4::after{z-index:3;}/* 3 */    
#gmail-logo2 .element5::before{/* z-index:4; */}/* 8 */    
#gmail-logo2 .element5::after{/* z-index:3; */}/* 9 */    
#gmail-logo2:hover *::after,    
#gmail-logo2:hover *::before{    
background:rgba(20, 196, 7, 1);    
}    
#gmail-logo2:hover .element1::before{    
	box-shadow:    
		-1px 1px 0 rgb(10, 90, 4),    
		-2px 2px 0 rgb(10, 90, 4),    
		-3px 3px 0 rgb(10, 90, 4),    
		-4px 4px 0 rgb(10, 90, 4),    
		-5px 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);    
	-webkit-box-shadow:    
		-1px 1px 0 rgb(10, 90, 4),    
		-2px 2px 0 rgb(10, 90, 4),    
		-3px 3px 0 rgb(10, 90, 4),    
		-4px 4px 0 rgb(10, 90, 4),    
		-5px 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);    
	-moz-box-shadow:    
		-1px 1px 0 rgb(10, 90, 4),    
		-2px 2px 0 rgb(10, 90, 4),    
		-3px 3px 0 rgb(10, 90, 4),    
		-4px 4px 0 rgb(10, 90, 4),    
		-5px 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);    
	}    
#gmail-logo2:hover .element1::after{    
	box-shadow:    
		-1px 1px 0 rgb(10, 90, 4),    
		-2px 2px 0 rgb(10, 90, 4),    
		-3px 3px 0 rgb(10, 90, 4),    
		-4px 4px 0 rgb(10, 90, 4),    
		-5px 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4),    
		-6px 7px 0 rgb(10, 90, 4);    
	-moz-box-shadow:    
		-1px 1px 0 rgb(10, 90, 4),    
		-2px 2px 0 rgb(10, 90, 4),    
		-3px 3px 0 rgb(10, 90, 4),    
		-4px 4px 0 rgb(10, 90, 4),    
		-5px 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4),    
		-6px 7px 0 rgb(10, 90, 4);    
	-webkit-box-shadow:    
		-1px 1px 0 rgb(10, 90, 4),    
		-2px 2px 0 rgb(10, 90, 4),    
		-3px 3px 0 rgb(10, 90, 4),    
		-4px 4px 0 rgb(10, 90, 4),    
		-5px 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4),    
		-6px 7px 0 rgb(10, 90, 4);    
	}    
#gmail-logo2:hover .element2::before{    
	box-shadow:    
		0 1px 0 rgb(10, 90, 4),    
		0 2px 0 rgb(10, 90, 4),    
		0 3px 0 rgb(10, 90, 4),    
		0 4px 0 rgb(10, 90, 4),    
		0 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);    
	-webkit-box-shadow:    
		0 1px 0 rgb(10, 90, 4),    
		0 2px 0 rgb(10, 90, 4),    
		0 3px 0 rgb(10, 90, 4),    
		0 4px 0 rgb(10, 90, 4),    
		0 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);    
	-moz-box-shadow:    
		0 1px 0 rgb(10, 90, 4),    
		0 2px 0 rgb(10, 90, 4),    
		0 3px 0 rgb(10, 90, 4),    
		0 4px 0 rgb(10, 90, 4),    
		0 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);    
	}    
#gmail-logo2:hover .element2::after{    
	box-shadow:    
		0 1px 0 rgb(10, 90, 4),    
		0 2px 0 rgb(10, 90, 4),    
		0 3px 0 rgb(10, 90, 4),    
		0 4px 0 rgb(10, 90, 4),    
		0 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);    
	-webkit-box-shadow:    
		0 1px 0 rgb(10, 90, 4),    
		0 2px 0 rgb(10, 90, 4),    
		0 3px 0 rgb(10, 90, 4),    
		0 4px 0 rgb(10, 90, 4),    
		0 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);    
	-moz-box-shadow:    
		0 1px 0 rgb(10, 90, 4),    
		0 2px 0 rgb(10, 90, 4),    
		0 3px 0 rgb(10, 90, 4),    
		0 4px 0 rgb(10, 90, 4),    
		0 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);	    
	}    
#gmail-logo2:hover .element3::after{    
	box-shadow:    
		0 1px 0 rgb(10, 90, 4),    
		0 2px 0 rgb(10, 90, 4),    
		0 3px 0 rgb(10, 90, 4),    
		0 4px 0 rgb(10, 90, 4),    
		0 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);    
	-webkit-box-shadow:    
		0 1px 0 rgb(10, 90, 4),    
		0 2px 0 rgb(10, 90, 4),    
		0 3px 0 rgb(10, 90, 4),    
		0 4px 0 rgb(10, 90, 4),    
		0 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);    
	-moz-box-shadow:    
		0 1px 0 rgb(10, 90, 4),    
		0 2px 0 rgb(10, 90, 4),    
		0 3px 0 rgb(10, 90, 4),    
		0 4px 0 rgb(10, 90, 4),    
		0 5px 0 rgb(10, 90, 4),    
		-6px 6px 0 rgb(10, 90, 4);    
	}    
#gmail-logo2:hover .element4::before{    
	box-shadow:    
		-1px 0 0 rgb(10, 90, 4),    
		-2px 0 0 rgb(10, 90, 4),    
		-3px 0 0 rgb(10, 90, 4),    
		-4px 0 0 rgb(10, 90, 4),    
		-5px 0 0 rgb(10, 90, 4),    
		-6px 0 0 rgb(10, 90, 4),    
		-7px 0 0 rgb(10, 90, 4),    
		-8px 0 0 rgb(10, 90, 4);    
	-moz-box-shadow:    
		-1px 0 0 rgb(10, 90, 4),    
		-2px 0 0 rgb(10, 90, 4),    
		-3px 0 0 rgb(10, 90, 4),    
		-4px 0 0 rgb(10, 90, 4),    
		-5px 0 0 rgb(10, 90, 4),    
		-6px 0 0 rgb(10, 90, 4),    
		-7px 0 0 rgb(10, 90, 4),    
		-8px 0 0 rgb(10, 90, 4);    
	-webkit-box-shadow:    
		-1px 0 0 rgb(10, 90, 4),    
		-2px 0 0 rgb(10, 90, 4),    
		-3px 0 0 rgb(10, 90, 4),    
		-4px 0 0 rgb(10, 90, 4),    
		-5px 0 0 rgb(10, 90, 4),    
		-6px 0 0 rgb(10, 90, 4),    
		-7px 0 0 rgb(10, 90, 4),    
		-8px 0 0 rgb(10, 90, 4);    
	}		    
-->	    
		</style>    
	</head>    
	<body>    
		<span id='gmail-logo2'>    
			<span class='element1'>&nbsp;</span>    
			<span class='element2'>&nbsp;</span>    
			<span class='element3'>&nbsp;</span>    
			<span class='element4'>&nbsp;</span>    
			<span class='element5'>&nbsp;</span>    
		</span>  
	</body>    
</html>

大家试试吧。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/gmaicss320210819.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    什么机翻...

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

  • Web前端之家

    OK,已经更新,谢谢!...

  • 韩涛博客

    韩涛博客的域名更换为www.hantaosec.com啦,请更新一下域名哈,谢谢。我还会继续链着咱们...

  • Web前端之家

    请持续关注Web前端之家。...

  • Y4K

    谢谢指导,这下背景问题解决了!...

  • Web前端之家

    要用起来才可以....

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria