CSS3制作中國聯通logo圖標

發表日期：2016-04-27 文章編輯：南昌開優網絡瀏覽次數：5472 標簽：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.568387.com/" target="_blank">開優網絡</a></p>
</div>
</body>
</html>
返回列表
上一篇：CSS3實現仿360錯誤提示頁面下一篇：CSS中正確設置微軟雅黑等字體的方法
欧美日韩一区二区三区四区不卡,日韩欧美视频一区二区三区四区,久久精品欧美一区二区三区不卡,国产精品久久久乱弄

CSS3制作中國聯通logo圖標
