搜索 登录注册
×

热门关键词：Web前端|前端开发|HTML5|CSS3|jQuery|CSS3动画

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

作者：Terry2021.08.19来源：Web前端之家浏览：11183评论:0
关键词：css3html5

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

Markup
<!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>

大家试试吧。

赏您的支持是我们创作的动力！
温馨提示：本文作者系Terry ，经Web前端之家编辑修改或补充，转载请注明出处和本文链接：
https://jiangweishan.com/article/gmaicss320210819.html

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

发表评论:

相关文章