纯CSS3变形金刚霸天虎图标特效代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是纯CSS3变形金刚霸天虎图标特效代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!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, 0.5, 0.25, 0.1); /* Firefox: */ -moz-animation: head-body-3 4s cubic-bezier(1, 0.5, 0.25, 0.1); /* Safari 和 Chrome: */ -webkit-animation: head-body-3 4s cubic-bezier(1, 0.5, 0.25, 0.1); /* Opera: */ -o-animation: head-body-3 4s cubic-bezier(1, 0.5, 0.25, 0.1); }
 @keyframes head-body-3 { 0% {
top:-800px;
}
 100% {
top:-482px;
}
}
 @-moz-keyframes head-body-3 /* Firefox */ { 0% {
top:-800px;
}
 100% {
top:-482px;
}
}
 @-webkit-keyframes head-body-3 /* Safari 和 Chrome */ { 0% {
top:-800px;
}
 100% {
top:-482px;
}
}
 @-o-keyframes head-body-3 /* Opera */ { 0% {
top:-800px;
}
 100% {
top:-482px;
}
}
/***********************************************/

.motime #head-eye, .motime #head-eye-2 { animation: head-body-4 5s cubic-bezier(1, 1, 0.5, 0.005); /* Firefox: */ -moz-animation: head-body-4 5s cubic-bezier(1, 1, 0.5, 0.005); /* Safari 和 Chrome: */ -webkit-animation: head-body-4 5s cubic-bezier(1, 1, 0.5, 0.005); /* Opera: */ -o-animation: head-body-4 5s cubic-bezier(1, 1, 0.5, 0.005); }
 @keyframes head-body-4 { 0% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 5% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 10% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 15% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 20% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 25% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 30% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 35% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 40% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 45% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 50% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 55% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 60% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 65% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 70% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 75% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 80% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 85% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 90% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 95% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 100% {
background: #4CBEFF;
box-shadow: rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
-webkit-box-shadow:rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
-moz-box-shadow:rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
}
}
 @-moz-keyframes head-body-4 /* Firefox */ { 0% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 5% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 10% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 15% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 20% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 25% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 30% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 35% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 40% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 45% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 50% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 55% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 60% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 65% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 70% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 75% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 80% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 85% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 90% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 95% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 100% {
background: #4CBEFF;
box-shadow: rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
-webkit-box-shadow:rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
-moz-box-shadow:rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
}
}
 @-webkit-keyframes head-body-4 /* Safari 和 Chrome */ { 0% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 5% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 10% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 15% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 20% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 25% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 30% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 35% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 40% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 45% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 50% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 55% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 60% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 65% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 70% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 75% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 80% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 85% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 90% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 95% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 100% {
background: #4CBEFF;
box-shadow: rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
-webkit-box-shadow:rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
-moz-box-shadow:rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
}
}
 @-o-keyframes head-body-4 /* Opera */ { 0% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 5% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;

-moz-box-shadow:none;
}
 10% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 15% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 20% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 25% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 30% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 35% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 40% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 45% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 50% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 55% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 60% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 65% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 70% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 75% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 80% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 85% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 90% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 95% {
background: none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
 100% {
background: #4CBEFF;
box-shadow: rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
-webkit-box-shadow:rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
-moz-box-shadow:rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
}
}
/***********************************************/

.motime #head-bottom { animation: head-body-5 3s cubic-bezier(0.1, 0.025, 0.005, 0.005); /* Firefox: */ -moz-animation: head-body-5 3s cubic-bezier(0.1, 0.025, 0.005, 0.005); /* Safari 和 Chrome: */ -webkit-animation: head-body-5 3s cubic-bezier(0.1, 0.025, 0.005, 0.005); /* Opera: */ -o-animation: head-body-5 3s cubic-bezier(0.1, 0.025, 0.005, 0.005); }
 @keyframes head-body-5 { 0% {
left:300px;
}
 50% {
left:-120px;
}
 100% {
left:-31px;
}
}
 @-moz-keyframes head-body-5 /* Firefox */ { 0% {
left:300px;
}
 50% {
left:-120px;
}
 100% {
left:-31px;
}
}
 @-webkit-keyframes head-body-5 /* Safari 和 Chrome */ { 0% {
left:300px;
}
 50% {
left:-120px;
}
 100% {
left:-31px;
}
}
 @-o-keyframes head-body-5 /* Opera */ { 0% {
left:300px;
}
 50% {
left:-120px;
}
 100% {
left:-31px;
}
}
/***********************************************/

.motime #head-bottom-2 { animation: head-body-6 3s cubic-bezier(0.1, 0.025, 0.005, 0.005); /* Firefox: */ -moz-animation: head-body-6 3s cubic-bezier(0.1, 0.025, 0.005, 0.005); /* Safari 和 Chrome: */ -webkit-animation: head-body-6 3s cubic-bezier(0.1, 0.025, 0.005, 0.005); /* Opera: */ -o-animation: head-body-6 3s cubic-bezier(0.1, 0.025, 0.005, 0.005); }
 @keyframes head-body-6 { 0% {
left:-300px;
}
 50% {
left:300px;
}
 100% {
left:115px;
}
}
 @-moz-keyframes head-body-6 /* Firefox */ { 0% {
left:-300px;
}
 50% {
left:300px;
}
 100% {
left:115px;
}
}
 @-webkit-keyframes head-body-6 /* Safari 和 Chrome */ { 0% {
left:-300px;
}
 50% {
left:300px;
}
 100% {
left:115px;
}
}
 @-o-keyframes head-body-6 /* Opera */ { 0% {
left:-300px;
}
 50% {
left:300px;
}
 100% {
left:115px;
}
}
/***********************************************/

.motime #head-toplogo:before { animation: head-body-7 3s cubic-bezier(1, 1, 0.005, 0.005); /* Firefox: */ -moz-animation: head-body-7 3s cubic-bezier(1, 1, 0.005, 0.005); /* Safari 和 Chrome: */ -webkit-animation: head-body-7 3s cubic-bezier(1, 1, 0.5, 0.005); /* Opera: */ -o-animation: head-body-7 3s cubic-bezier(1, 1, 0.005, 0.005); }
 @keyframes head-body-7 { 0% {
border-top: 30px solid #555;
}
 5% {
border-top: 30px solid #555;
}
 10% {
border-top: 30px solid #555;
}
 15% {
border-top: 30px solid #555;
}
 20% {
border-top: 30px solid #555;
}
 25% {
border-top: 30px solid #555;
}
 30% {
border-top: 30px solid #555;
}
 35% {
border-top: 30px solid #555;
}
 40% {
border-top: 30px solid #555;
}
 45% {
border-top: 30px solid #555;
}
 50% {
border-top: 30px solid #555;
}
 55% {
border-top: 30px solid #555;
}
 60% {
border-top: 30px solid #555;
}
 65% {
border-top: 30px solid #555;
}
 70% {
border-top: 30px solid #555;
}
 75% {
border-top: 30px solid #555;
}
 80% {
border-top: 30px solid #555;
}
 85% {
border-top: 30px solid #555;
}
 90% {
border-top: 30px solid #333;
}
 95% {
border-top: 30px solid #555;
}
 100% {
border-top: 30px solid #333;
}
}
 @-moz-keyframes head-body-7 /* Firefox */ { 0% {
border-top: 30px solid #555;
}
 5% {
border-top: 30px solid #555;
}
 10% {
border-top: 30px solid #555;
}
 15% {
border-top: 30px solid #555;
}
 20% {
border-top: 30px solid #555;
}
 25% {
border-top: 30px solid #555;
}
 30% {
border-top: 30px solid #555;
}
 35% {
border-top: 30px solid #555;
}
 40% {
border-top: 30px solid #555;
}
 45% {
border-top: 30px solid #555;
}
 50% {
border-top: 30px solid #555;
}
 55% {
border-top: 30px solid #555;
}
 60% {
border-top: 30px solid #555;
}
 65% {
border-top: 30px solid #555;
}
 70% {
border-top: 30px solid #555;
}
 75% {
border-top: 30px solid #555;
}
 80% {
border-top: 30px solid #555;
}
 85% {
border-top: 30px solid #555;
}
 90% {
border-top: 30px solid #333;
}
 95% {
border-top: 30px solid #555;
}
 100% {
border-top: 30px solid #333;
}
}
 @-webkit-keyframes head-body-7 /* Safari 和 Chrome */ { 0% {
border-top: 30px solid #555;
}
 5% {
border-top: 30px solid #555;
}
 10% {
border-top: 30px solid #555;
}
 15% {
border-top: 30px solid #555;
}
 20% {
border-top: 30px solid #555;
}
 25% {
border-top: 30px solid #555;
}
 30% {
border-top: 30px solid #555;
}
 35% {
border-top: 30px solid #555;
}
 40% {
border-top: 30px solid #555;
}
 45% {
border-top: 30px solid #555;
}
 50% {
border-top: 30px solid #555;
}
 55% {
border-top: 30px solid #555;
}
 60% {
border-top: 30px solid #555;
}
 65% {
border-top: 30px solid #555;
}
 70% {
border-top: 30px solid #555;
}
 75% {
border-top: 30px solid #555;
}
 80% {
border-top: 30px solid #555;
}
 85% {
border-top: 30px solid #555;
}
 90% {
border-top: 30px solid #333;
}
 95% {
border-top: 30px solid #555;
}
 100% {
border-top: 30px solid #333;
}
}
 @-o-keyframes head-body-7 /* Opera */ { 0% {
border-top: 30px solid #555;
}
 5% {
border-top: 30px solid #555;
}
 10% {
border-top: 30px solid #555;
}
 15% {
border-top: 30px solid #555;
}
 20% {
border-top: 30px solid #555;
}
 25% {
border-top: 30px solid #555;
}
 30% {
border-top: 30px solid #555;
}
 35% {
border-top: 30px solid #555;
}
 40% {
border-top: 30px solid #555;
}
 45% {
border-top: 30px solid #555;
}
 50% {
border-top: 30px solid #555;
}
 55% {
border-top: 30px solid #555;
}
 60% {
border-top: 30px solid #555;
}
 65% {
border-top: 30px solid #555;
}
 70% {
border-top: 30px solid #555;
}
 75% {
border-top: 30px solid #555;
}
 80% {
border-top: 30px solid #555;
}
 85% {
border-top: 30px solid #555;
}
 90% {
border-top: 30px solid #333;
}
 95% {
border-top: 30px solid #555;
}
 100% {
border-top: 30px solid #333;
}
}
/***********************************************************************************/

.wrap { width: 200px; height: 80px; margin: 0 auto; }
.loading { position: relative; text-align: right; text-shadow: 0 0 6px #bce4ff; height: 20px; width: 185px; font-family: arial; color: #4CBEFF; text-shadow: rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px; }
.loading span { display: block; text-transform: uppercase; position: absolute; right: 30px; height: 20px; width: 200px; line-height: 20px; }
.loading span:after { content: ""; display: block; position: absolute; top: -2px; right: -21px; height: 20px; width: 16px; background: #4CBEFF; -moz-box-shadow: 0 0 15px #bce4ff; -webkit-box-shadow: 0 0 15px #bce4ff; box-shadow: 0 0 15px #bce4ff; -moz-animation: blink 5s infinite; -webkit-animation: blink 5s infinite; animation: blink 5s infinite; }
.loading span.title { -moz-animation: title 12s linear infinite; -webkit-animation: title 12s linear infinite; animation: title 12s linear infinite; }
.loading span.text { -moz-animation: title 12s linear 5s infinite; -webkit-animation: title 12s linear 5s infinite; animation: title 12s linear 5s infinite; opacity: 0; }
 @-webkit-keyframes title { 0% {
 opacity: 0;
 right: 130px;
}
 48% {
 opacity: 0;
 right: 130px;
}
 52% {
 opacity: 1;
 right: 30px;
}
 70% {
 opacity: 1;
 right: 30px;
}
 100% {
 opacity: 0;
 right: 30px;
}
}
 @-moz-keyframes title { 0% {
 opacity: 0;
 right: 130px;
}
 48% {
 opacity: 0;
 right: 130px;
}
 52% {
 opacity: 1;
 right: 30px;
}
 70% {
 opacity: 1;
 right: 30px;
}
 100% {
 opacity: 0;
 right: 30px;
}
}
 @-webkit-keyframes fade { 0% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
 @-moz-keyframes fade { 0% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
 @-webkit-keyframes bg { 0% {
 background-color: #306f99;
}
 50% {
 background-color: #19470f;
}
 90% {
 background-color: #734a10;
}
}
 @-moz-keyframes bg { 0% {
 background-color: #306f99;
}
 50% {
 background-color: #19470f;
}
 90% {
 background-color: #734a10;
}
}
 @-webkit-keyframes blink { 0% {
 opacity: 0;
}
 5% {
 opacity: 1;
}
 10% {
 opacity: 0;
}
 15% {
 opacity: 1;
}
 20% {
 opacity: 0;
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
}
 35% {
 opacity: 1;
}
 40% {
 opacity: 0;
 right: -21px;
}
 45% {
 opacity: 1;
 right: 80px;
}
 50% {
 opacity: 0;
 right: -21px;
}
 51% {
 right: -21px;
}
 55% {
 opacity: 1;
}
 60% {
 opacity: 0;
}
 65% {
 opacity: 1;
}
 70% {
 opacity: 0;
}
 75% {
 opacity: 1;
}
 80% {
 opacity: 0;
}
 85% {
 opacity: 1;
}
 90% {
 opacity: 0;
 right: -21px;
}
 95% {
 opacity: 1;
 right: 80px;
}
 96% {
 right: -21px;
}
 100% {
 opacity: 0;
 right: -21px;
}
}
 @-moz-keyframes blink { 0% {
 opacity: 0;
}
 5% {
 opacity: 1;
}
 10% {
 opacity: 0;
}
 15% {
 opacity: 1;
}
 20% {
 opacity: 0;
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
}
 35% {
 opacity: 1;
}
 40% {
 opacity: 0;
 right: -21px;
}
 45% {
 opacity: 1;
 right: 80px;
}
 50% {
 opacity: 0;
 right: -21px;
}
 51% {
 right: -21px;
}
 55% {
 opacity: 1;
}
 60% {
 opacity: 0;
}
 65% {
 opacity: 1;
}
 70% {
 opacity: 0;
}
 75% {
 opacity: 1;
}
 80% {
 opacity: 0;
}
 85% {
 opacity: 1;
}
 90% {
 opacity: 0;
 right: -21px;
}
 95% {
 opacity: 1;
 right: 80px;
}
 96% {
 right: -21px;
}
 100% {
 opacity: 0;
 right: -21px;
}
}
</style>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)