用CSS和HTML做出Windows 8的Logo

7 / 9, 2012 HTML , Microsoft , Windows , 網路 , 電腦技巧

Windows 8最近吵得沸沸揚揚的,主要都是在討論開始選單不見的事,這時有高手用CSS及HTML做出了Win 8的Logo!剛好最近小弟想要把CSS重新學習(總覺得以前學的不好~),把他當做範例也不錯!!!別再賣關子了,直接分享吧!

<style type="text/css">
.windows_8_logo_container {
	padding: 100px 0;
	background: #fff;
	height: 150px;
	-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.window {
	position: relative;
	float: left;
	margin-left: 50px;
	width: 200px;
	height: 150px;
	background: #00adef;
	-webkit-transform: perspective(400px) rotateY(-25deg);
	-moz-transform: perspective(400px) rotateY(-25deg);
	-ms-transform: perspective(400px) rotateY(-25deg);
	-o-transform: perspective(400px) rotateY(-25deg);
	transform: perspective(400px) rotateY(-25deg);
	-webkit-animation: windows_animation 3s infinite;
	-moz-animation: windows_animation 5s infinite;
	-ms-animation: windows_animation 5s infinite;
}
.window::after, .window::before {
	content: '';
	background: #fff;
	height: 100%;
	width: 10px;
	left: 50%;
	margin-left:-5px;
	top:0;
	position: absolute;
}
.window::before {
	left: 0;
	top: 50%;
	margin-top: -5px;
	margin-left: 0;
	height: 10px;
	width: 100%;
	position: absolute;
}
.logo_text {
	color: #00adef;
	line-height: 150px;
	font-size: 130px;
	padding-left: 20px;
	float: left;
}
</style>

<div class="windows_8_logo_container">
 <div class="window"></div>
 <div class="logo_text">Windows 8</div>
</div>

範例:http://dl.dropbox.com/u/34563728/win-8-logo.html
如果想要有更好的效果,可以考慮使用"動畫版"(這招厲害!!!)

<style type="text/css">
.windows_8_logo_container {
	padding: 100px 0;
	background: #fff;
	height: 150px;
	-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.window {
	position: relative;
	float: left;
	margin-left: 50px;
	width: 200px;
	height: 150px;
	background: #00adef;
	-webkit-transform: perspective(400px) rotateY(-25deg);
	-moz-transform: perspective(400px) rotateY(-25deg);
	-ms-transform: perspective(400px) rotateY(-25deg);
	-o-transform: perspective(400px) rotateY(-25deg);
	transform: perspective(400px) rotateY(-25deg);
	-webkit-animation: windows_animation 3s infinite;
	-moz-animation: windows_animation 5s infinite;
	-ms-animation: windows_animation 5s infinite;
}
.window::after, .window::before {
	content: '';
	background: #fff;
	height: 100%;
	width: 10px;
	left: 50%;
	margin-left:-5px;
	top:0;
	position: absolute;
}
.window::before {
	left: 0;
	top: 50%;
	margin-top: -5px;
	margin-left: 0;
	height: 10px;
	width: 100%;
	position: absolute;
}
.logo_text {
	color: #00adef;
	line-height: 150px;
	font-size: 130px;
	padding-left: 20px;
	float: left;
}
@-webkit-keyframes windows_animation {
	0%, 100% { 
		-webkit-transform: perspective(400px) rotateY(-25deg);
	}
	50% {
		-webkit-transform: perspective(400px) rotateY(-35deg);
	}
}
@-moz-keyframes windows_animation {
	0%, 100% { 
		-moz-transform: perspective(400px) rotateY(-25deg);
	}
	50% {
		-moz-transform: perspective(400px) rotateY(-35deg);
	}
}
@-ms-keyframes windows_animation {
	0%, 100% { 
		-ms-transform: perspective(400px) rotateY(-25deg);
	}
	50% {
		-ms-transform: perspective(400px) rotateY(-35deg);
	}
}
</style>

<div class="windows_8_logo_container">
 <div class="window"></div>
 <div class="logo_text">Windows 8</div>
</div>

範例:http://dl.dropbox.com/u/34563728/win-8-logo-animation.html
註:以上範例如果看不到或怪怪的,代表瀏覽器要更新囉!
註:小弟在測試時,有發現排版錯誤也會導致執行異常(如4個小長方形變成1個大長方形,動畫版不會動等問題),如果有發現出錯,請複製範例的程式碼
原文(英文)教學:http://tjrus.com/lab/windows_8