<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="HandheldFriendly" content="true">
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<meta charset="utf-8">
<title>纯CSS3变形金刚霸天虎图标特效 - 网页模板</title>
</head>
<body>
<div id="t-ov">
<div class="motime">
<div id="head-body"></div>
<div id="head-topcover"></div>
<div id="head-toplogo-bg"></div>
<div id="head-toplogo"></div>
<div id="head-toplogo-2"></div>
<div id="head-bottom"></div>
<div id="head-bottom-2"></div>
<div id="head-sw"></div>
<div id="head-sw-2"></div>
<div id="head-eye"></div>
<div id="head-eye-2"></div>
</div>
</div>
<style>
body { background: #333; min-width: 320px; }
#head-body { height: 0; width: 200px; position: relative; margin: 25px 0 50px 0; border-top: 150px solid #555; border-left: 25px solid transparent; border-right: 25px solid transparent; z-index: 2; }
#head-body:after { content: ""; position: absolute; top: 0px; left: 0px; width: 0; height: 0; border-style: solid; border-color: #555 transparent transparent transparent; border-width: 150px 100px 0 100px; }
#head-eye { width: 32px; height: 22px; -webkit-transform: skew(46deg) rotate(14deg); -moz-transform: skew(46deg) rotate(14deg); -o-transform: skew(46deg) rotate(14deg); background: #4CBEFF; box-shadow: rgba(255, 255, 255, 0.4) 0 0 15px, rgba(76, 190, 255, 0.95) 0 0 10px; z-index: 12; left: 67px; position: relative; top: -585px; }
#head-eye-2 { width: 32px; height: 22px; -webkit-transform: skew(-46deg) rotate(-14deg); -moz-transform: skew(-46deg) rotate(-14deg); -o-transform: skew(-46deg) rotate(-14deg); background: #4CBEFF; box-shadow: rgba(255, 255, 255, 0.4) 0 0 15px, rgba(76, 190, 255, 0.95) 0 0 10px; z-index: 12; left: 150px; position: relative; top: -607px; }
#head-topcover { border-top: 80px solid #333; border-left: 60px solid transparent; border-right: 60px solid transparent; height: 0; width: 169px; position: relative; z-index: 5; top: -225px; left: -19px; }
#head-topcover:after { content: ""; position: absolute; top: 0px; left: 0px; width: 0; height: 0; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 15px 85px 0 85px; }
#head-toplogo-bg { border-top: 110px solid #333; border-left: 35px solid transparent; border-right: 35px solid transparent; height: 0; width: 46px; position: relative; z-index: 6; top: -267px; left: 67px; }
#head-toplogo-bg:after { content: ""; position: absolute; top: 0px; left: 0px; width: 0; height: 0; border-style: solid; border-color: #333 transparent transparent transparent; border-width: 30px 23px 0 23px; }
#head-toplogo { border-top: 105px solid #555; border-left: 30px solid transparent; border-right: 30px solid transparent; height: 0; width: 40px; position: relative; z-index: 7; top: -377px; left: 75px; }
#head-toplogo:before { border-top: 30px solid #333; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; height: 0; width: 0; top: -42px; left: 10px; display: block; content: ''; }
#head-toplogo:after { content: ""; position: absolute; top: 0px; left: 0px; width: 0; height: 0; border-style: solid; border-color: #555 transparent transparent transparent; border-width: 28px 20px 0 20px; }
#head-toplogo-2 { border-top: 37px solid #333; border-left: 35px solid transparent; border-right: 35px solid transparent; height: 0; width: 30px; position: relative; z-index: 8; top: -482px; left: 75px; }
#head-bottom { margin: 50px 0; position: relative; display: block; color: #555; width: 0px; height: 0px; border-right: 107px solid transparent; border-bottom: 44px solid #555; border-left: 60px solid transparent; -moz-transform: rotate(236deg); -webkit-transform: rotate(236deg); -ms-transform: rotate(236deg); -o-transform: rotate(236deg); top: -365px; left: -31px; z-index: 10; }
#head-bottom-2 { position: relative; display: block; color: #555; width: 0px; height: 0px; border-right: 60px solid transparent; border-bottom: 44px solid #555; border-left: 107px solid transparent; -moz-transform: rotate(484deg); -webkit-transform: rotate(484deg); -ms-transform: rotate(484deg); -o-transform: rotate(484deg); top: -460px; left: 115px; }
#head-sw { width: 49px; height: 8px; -webkit-transform: skew(-149deg) rotate(9deg); -moz-transform: skew(-149deg) rotate(9deg); -o-transform: skew(-149deg) rotate(9deg); background: #333; z-index: 15; left: 45px; position: relative; top: -629px; }
#head-sw:after { width: 53px; height: 8px; -webkit-transform: skew(-174deg) rotate(1deg); -moz-transform: skew(-174deg) rotate(1deg); -o-transform: skew(-174deg) rotate(1deg); background: #333; content: ""; position: absolute; top: 24px; left: -6px; }
#head-sw-2 { width: 49px; height: 8px; -webkit-transform: skew(279deg) rotate(10deg); -moz-transform: skew(279deg) rotate(10deg); -o-transform: skew(279deg) rotate(10deg); background: #333; z-index: 15; left: 155px; position: relative; top: -637px; }
#head-sw-2:after { width: 45px; height: 9px; -webkit-transform: skew(-212deg) rotate(0deg); -moz-transform: skew(-212deg) rotate(0deg); -o-transform: skew(-212deg) rotate(0deg); background: #333; content: ""; position: absolute; top: -2px; left: 132px; }
#t-ov { width: 250px; height: 325px; overflow: hidden; margin: 50px auto 20px auto; }
.motime { }
.motime #head-body { animation: head-body-1 4s cubic-bezier(0.25, 0.1, 0.25, 1); /* Firefox: */ -moz-animation: head-body-1 4s cubic-bezier(0.25, 0.1, 0.25, 1); /* Safari 和 Chrome: */ -webkit-animation: head-body-1 4s cubic-bezier(0.25, 0.1, 0.25, 1); /* Opera: */ -o-animation: head-body-1 4s cubic-bezier(0.25, 0.1, 0.25, 1); }
@keyframes head-body-1 {
0% {top:350px; border-top: 150px solid #555; border-left: 25px solid transparent; border-right: 25px solid transparent;}
100% {top:0px; border-top: 150px solid #555; border-left: 25px solid transparent; border-right: 25px solid transparent;}
}
@-moz-keyframes head-body-1 /* Firefox */ { 0% {
top:350px;
border-top: 150px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
100% {
top:0px;
border-top: 150px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
}
@-webkit-keyframes head-body-1 /* Safari 和 Chrome 基于webkit内核浏览器 */ { 0% {
top:350px;
border-top: 150px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
100% {
top:0px;
border-top: 150px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
}
@-o-keyframes head-body-1 /* Opera */ { 0% {
top:350px;
border-top: 150px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
100% {
top:0px;
border-top: 150px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
}
/***********************************************/
.motime #head-toplogo { animation: head-body-2 2s cubic-bezier(0.25, 0.1, 0.25, 1); /* Firefox: */ -moz-animation: head-body-2 2s cubic-bezier(0.25, 0.1, 0.25, 1); /* Safari 和 Chrome: */ -webkit-animation: head-body-2 2s cubic-bezier(0.25, 0.1, 0.25, 1); /* Opera: */ -o-animation: head-body-2 2s cubic-bezier(0.25, 0.1, 0.25, 1); }
@keyframes head-body-2 { 0% {
top:-600px;
}
100% {
top:-377px;
}
}
@-moz-keyframes head-body-2 /* Firefox */ { 0% {
top:-600px;
}
100% {
top:-377px;
}
}
@-webkit-keyframes head-body-2 /* Safari 和 Chrome */ { 0% {
top:-600px;
}
100% {
top:-377px;
}
}
@-o-keyframes head-body-2 /* Opera */ { 0% {
top:-600px;
}
100% {
top:-377px;
}
}
/***********************************************/
.motime #head-toplogo-2 { animation: head-body-3 4s cubic-bezier(1
