CSS3制作中国联通logo图标

发表日期：2016-04-27 文章编辑：南昌开优网络浏览次数：5039 标签：CSS应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS3制作中国联通logo图标样式 - 开优网络</title>
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	html{
		font-size: 100%;
	}
	body {
		perspective: 1000px;
		-moz-perspective: 1000px;
		-webkit-perspective: 1000px;
	}
	
	.logo {
		width: 450px;
		height: 450px;
		margin: 100px auto 0;
		position: relative;
		
		transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
		-webkit-transform: rotateZ(45deg);
		
		animation: UincomRotate 10s linear infinite;
		-moz-animation: UincomRotate 10s linear infinite;
		-webkit-animation: UincomRotate 10s linear infinite;
		
		transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
	}
	
	@-webkit-keyframes UincomRotate {
		from {
			transform: rotateY(0deg) rotateZ(45deg);
			-webkit-transform: rotateY(0deg) rotateZ(45deg);
		}
		to {
			transform: rotateY(360deg) rotateZ(45deg);
			-webkit-transform: rotateY(360deg) rotateZ(45deg);
		}
	}
	
	body>div div {
		width: 50px;
		height: 50px;
		background-color: red;
		position: absolute;
		animation: UincomColor 5s linear infinite;
		-moz-animation: UincomColor 5s linear infinite;
		-webkit-animation: UincomColor 5s linear infinite;
	}
	
	@-webkit-keyframes UincomColor {
		from {
			box-shadow: 0 0 20px red;
			-webkit-box-shadow: 0 0 20px red;
		}
		50% {
			box-shadow: 0 0 50px red;
			-webkit-box-shadow: 0 0 50px red;
		}
		to {
			box-shadow: 0 0 20px red;
			-webkit-box-shadow: 0 0 20px red;
		}
	}
	
	body>div>div>div {
		background-color: white;
		
		animation: UincomColorInset 5s linear infinite;
		-moz-animation: UincomColorInset 5s linear infinite;
		-webkit-animation: UincomColorInset 5s linear infinite;
	}
	
	@-webkit-keyframes UincomColorInset {
		from {
			box-shadow: 0 0 20px red inset;
			-webkit-box-shadow: 0 0 20px red inset;
		}
		to {
			box-shadow: 0 0 20px red inset;
			-webkit-box-shadow: 0 0 20px red inset;
		}
	}
	/*扇形块*/
	
	.sector {
		border-radius: 100% 0 0 0;
	}
	/*行1*/
	
	.sector:nth-of-type(1) {
		left: 100px;
	}
	
	.sector:nth-of-type(2) {
		left: 200px;
		
		transform: rotateZ(90deg);
		-moz-transform: rotateZ(90deg);
		-webkit-transform: rotateZ(90deg);
	}
	
	.sector:nth-of-type(3) {
		left: 300px;
	}
	
	.sector:nth-of-type(4) {
		left: 400px;
		
		transform: rotateZ(90deg);
		-moz-transform: rotateZ(90deg);
		-webkit-transform: rotateZ(90deg);
	}
	/*行3*/
	
	.sector:nth-of-type(5) {
		top: 100px;
	}
	
	.sector:nth-of-type(6) {
		top: 100px;
		left: 400px;
		
		transform: rotateZ(180deg);
		-moz-transform: rotateZ(180deg);
		-webkit-transform: rotateZ(180deg);
	}
	/*行5*/
	
	.sector:nth-of-type(7) {
		top: 200px;
		
		transform: rotateZ(-90deg);
		-moz-transform: rotateZ(-90deg);
		-webkit-transform: rotateZ(-90deg);
	}
	
	.sector:nth-of-type(8) {
		top: 200px;
		left: 400px;
		
		transform: rotateZ(90deg);
		-moz-transform: rotateZ(90deg);
		-webkit-transform: rotateZ(90deg);
	}
	/*行7*/
	
	.sector:nth-of-type(9) {
		top: 300px;
	}
	
	.sector:nth-of-type(10) {
		top: 300px;
		left: 400px;
		
		transform: rotateZ(180deg);
		-moz-transform: rotateZ(180deg);
		-webkit-transform: rotateZ(180deg);
	}
	/*行9*/
	
	.sector:nth-of-type(11) {
		top: 400px;
		
		transform: rotateZ(-90deg);
		-moz-transform: rotateZ(-90deg);
		-webkit-transform: rotateZ(-90deg);
	}
	
	.sector:nth-of-type(12) {
		top: 400px;
		left: 100px;
		
		transform: rotateZ(180deg);
		-moz-transform: rotateZ(180deg);
		-webkit-transform: rotateZ(180deg);
	}
	
	.sector:nth-of-type(13) {
		top: 400px;
		left: 200px;
		
		transform: rotateZ(-90deg);
		-moz-transform: rotateZ(-90deg);
		-webkit-transform: rotateZ(-90deg);
	}
	
	.sector:nth-of-type(14) {
		top: 400px;
		left: 300px;
		
		transform: rotateZ(180deg);
		-moz-transform: rotateZ(180deg);
		-webkit-transform: rotateZ(180deg);
	}
	/*正方形*/
	/*行1*/
	
	.square:nth-of-type(15) {
		left: 150px;
	}
	
	.square:nth-of-type(16) {
		left: 350px;
	}
	/*行2*/
	
	.square:nth-of-type(17) {
		top: 50px;
		left: 100px;
	}
	
	.square:nth-of-type(18) {
		top: 50px;
		left: 200px;
	}
	
	.square:nth-of-type(19) {
		top: 50px;
		left: 300px;
	}
	
	.square:nth-of-type(20) {
		top: 50px;
		left: 400px;
	}
	/*行3*/
	
	.square:nth-of-type(21) {
		top: 100px;
		left: 50px;
	}
	
	.square:nth-of-type(22) {
		top: 100px;
		left: 100px;
	}
	
	.square:nth-of-type(23) {
		top: 100px;
		left: 200px;
	}
	
	.square:nth-of-type(24) {
		top: 100px;
		left: 300px;
	}
	
	.square:nth-of-type(25) {
		top: 100px;
		left: 350px;
	}
	/*行4*/
	
	.square:nth-of-type(26) {
		top: 150px;
	}
	
	.square:nth-of-type(27) {
		top: 150px;
		left: 200px;
	}
	/*行5*/
	
	.square:nth-of-type(28) {
		top: 200px;
		left: 50px;
	}
	
	.square:nth-of-type(29) {
		top: 200px;
		left: 100px;
	}
	
	.square:nth-of-type(30) {
		top: 200px;
		left: 150px;
	}
	
	.square:nth-of-type(31) {
		top: 200px;
		left: 200px;
	}
	
	.square:nth-of-type(32) {
		top: 200px;
		left: 250px;
	}
	
	.square:nth-of-type(33) {
		top: 200px;
		left: 300px;
	}
	
	.square:nth-of-type(34) {
		top: 200px;
		left: 350px;
	}
	/*行6*/
	
	.square:nth-of-type(35) {
		top: 250px;
		left: 200px;
	}
	
	.square:nth-of-type(36) {
		top: 250px;
		left: 400px;
	}
	/*行7*/
	
	.square:nth-of-type(37) {
		top: 300px;
		left: 50px;
	}
	
	.square:nth-of-type(38) {
		top: 300px;
		left: 100px;
	}
	
	.square:nth-of-type(39) {
		top: 300px;
		left: 200px;
	}
	
	.square:nth-of-type(40) {
		top: 300px;
		left: 300px;
	}
	
	.square:nth-of-type(41) {
		top: 300px;
		left: 350px;
	}
	/*行8*/
	
	.square:nth-of-type(42) {
		top: 350px;
	}
	
	.square:nth-of-type(43) {
		top: 350px;
		left: 100px;
	}
	
	.square:nth-of-type(44) {
		top: 350px;
		left: 200px;
	}
	
	.square:nth-of-type(45) {
		top: 350px;
		left: 300px;
	}
	/*行9*/
	
	.square:nth-of-type(46) {
		top: 400px;
		left: 50px;
	}
	
	.square:nth-of-type(47) {
		top: 400px;
		left: 250px;
	}
	/*长方形*/
	
	.rectangle {
		background: -webkit-linear-gradient(top, red 40px, #FF828E 40px);
		background: -moz-linear-gradient(top, red 40px, #FF828E 40px);
		background: linear-gradient(top, red 40px, #FF828E 40px);
	}
	/*行3*/
	
	.rectangle:nth-of-type(48) {
		top: 100px;
		left: 150px;
		-webkit-transform: rotateZ(-90deg);
		-moz-transform: rotateZ(-90deg);
		transform: rotateZ(-90deg);
	}
	
	.rectangle:nth-of-type(49) {
		top: 100px;
		left: 250px;
		-webkit-transform: rotateZ(90deg);
		-moz-transform: rotateZ(90deg);
		transform: rotateZ(90deg);
	}
	/*行4*/
	
	.rectangle:nth-of-type(50) {
		top: 150px;
		left: 100px;
	}
	
	.rectangle:nth-of-type(51) {
		top: 150px;
		left: 300px;
	}
	/*行6*/
	
	.rectangle:nth-of-type(52) {
		top: 250px;
		left: 100px;
		-webkit-transform: rotateZ(180deg);
		-moz-transform: rotateZ(180deg);
		transform: rotateZ(180deg);
	}
	
	.rectangle:nth-of-type(53) {
		top: 250px;
		left: 300px;
		-webkit-transform: rotateZ(180deg);
		-moz-transform: rotateZ(180deg);
		transform: rotateZ(180deg);
	}
	/*行7*/
	
	.rectangle:nth-of-type(54) {
		top: 300px;
		left: 150px;
		-webkit-transform: rotateZ(-90deg);
		-moz-transform: rotateZ(-90deg);
		transform: rotateZ(-90deg);
	}
	
	.rectangle:nth-of-type(55) {
		top: 300px;
		left: 250px;
		-webkit-transform: rotateZ(90deg);
		-moz-transform: rotateZ(90deg);
		transform: rotateZ(90deg);
	}
	/*拱形*/
	
	.arch .arch-white {
		border-radius: 30% 30% 0 0;
	}
	/*行2*/
	
	.arch:nth-of-type(56) {
		top: 50px;
		left: 150px;
	}
	/*行3*/
	
	.arch:nth-of-type(57) {
		top: 150px;
		left: 50px;
		-webkit-transform: rotateZ(-90deg);
		-moz-transform: rotateZ(-90deg);
		transform: rotateZ(-90deg);
	}
	/*行6*/
	
	.arch:nth-of-type(58) {
		top: 250px;
		left: 350px;
		-webkit-transform: rotateZ(90deg);
		-moz-transform: rotateZ(90deg);
		transform: rotateZ(90deg);
	}
	/*行7*/
	
	.arch:nth-of-type(59) {
		top: 350px;
		left: 250px;
		-webkit-transform: rotateZ(180deg);
		-moz-transform: rotateZ(180deg);
		transform: rotateZ(180deg);
	}
	/*花瓣*/
	
	.petal .petal-white {
		border-radius: 50% 50% 50% 0;
	}
	/*行2*/
	
	.petal:nth-of-type(60) {
		top: 50px;
		left: 350px;
	}
	/*行7*/
	
	.petal:nth-of-type(61) {
		top: 350px;
		left: 50px;
		-webkit-transform: rotateZ(180deg);
		-moz-transform: rotateZ(180deg);
		transform: rotateZ(180deg);
	}
	/*设置文字*/
	.text{
		width: 450px;
		margin: 20px auto;
		font-family: "微软雅黑";
		font-size: 4.0rem;
		font-weight: bold;
		line-height: 60px;
		text-align: center;
	}
	.text red{
		color: red;
	}
	.text fw{
		font-size: 3.6rem;
	}
	.text chi{
		font-size:2.8rem;
		letter-spacing: 30px;
	}
</style>
</head>

<body>
<div class="logo">
	<!--扇形14个（1-14）-->
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<div class="sector"></div>
	<!--正方形33个（15-47）-->
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<!--长方形8个（48-55）-->
	<div class="rectangle"></div>
	<div class="rectangle"></div>
	<div class="rectangle"></div>
	<div class="rectangle"></div>
	<div class="rectangle"></div>
	<div class="rectangle"></div>
	<div class="rectangle"></div>
	<div class="rectangle"></div>
	<!--拱形4个（56-59）-->
	<div class="arch">
		<div class="arch-white"></div>
	</div>
	<div class="arch">
		<div class="arch-white"></div>
	</div>
	<div class="arch">
		<div class="arch-white"></div>
	</div>
	<div class="arch">
		<div class="arch-white"></div>
	</div>
	<!--花瓣4个（60-61）-->
	<div class="petal">
		<div class="petal-white"></div>
		<div class="petal-white"></div>
	</div>
	<div class="petal">
		<div class="petal-white"></div>
	</div>
</div>
<div class="text">
	<p><fw>C</fw>h<red>i</red>na un<red>i</red>com</p>
	<p><chi>中国联通</chi></p>	    
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.kaiu.net/" target="_blank">开优网络</a></p>
</div>
</body>
</html>
返回列表
上一篇：CSS3实现仿360错误提示页面下一篇：CSS中正确设置微软雅黑等字体的方法