<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>翼世界夢想領域</title>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="images/icon.ico" rel="shortcut icon"/>
</head>
<body>
<div id = "link">
<ul>
<li><a href = "wordpress" id = "wp">Wordpress</a></li>
<li><a href = "discuz" id = "dz">Discuz</a></li>
</ul>
</div>
<div id = "animate">
<div id = "star"></div>
<div id = "manystar"></div>
<div id = "font"></div>
<div id = "underfont"></div>
<div id = "leftknight"></div>
</div>
</body>
</html>
@import "compass/reset";
@import "compass/css3/transition";
@import "compass/css3/transform";
@mixin animation( $value ){
animation: $value;
-webkit-animation: $value;
-moz-animation: $value;
-o-animation: $value;
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
@-o-keyframes #{$name} {
@content;
}
}
body{
background: inline-image('bgblue3.png') #134e8b repeat-x;
margin: 0px;
font-family: "Century Gothic";
}
#animate{
width: 800px;
height: 480px;
margin: 100px auto;
position: relative;
}
#star{
width: 800px;
height: 396px;
position: absolute;
background: inline-image( "Logo3star.png" );
@include animation(starani 2s);
}
#manystar{
width: 800px;
height: 396px;
position: absolute;
background: inline-image( "Logo3manystar.png" );
@include animation(manystarani 6s);
}
#font{
width: 800px;
height: 396px;
position: absolute;
background: inline-image( "Logo3font.png" );
@include animation(fontani 4s);
}
#underfont{
width: 800px;
height: 396px;
position: absolute;
background: inline-image( "Logo3underfont.png" );
@include animation(manystarani 6s);
}
#link{
width: 100%;
height: 50px;
margin-top: 10px;
text-align: center;
background: #134e8b;
@include animation(linkani 8s);
ul{
padding: 0px;
margin: 0 auto;
width: 400px;
position: relative;
li{
list-style-type: none;
float: left;
a{
text-decoration: none;
color: white;
display: block;
width: 200px;
height: 40px;
font-size: 20px;
padding-top: 10px;
position: absolute;
&#wp{
background-image: inline-image('wordpress.png');
background-position: top center;
background-repeat: no-repeat;
@include transition(width 1s, height 1s, background-color 1s, left 1s, color 1s, z-index 0s);
&:hover{
width: 300px;
height: 188px;
background-color: yellow;
color: black;
z-index: 99;
left: -100px;
}
&:active{
background-color: red;
}
}
&#dz{
left: 200px;
background-image: inline-image('discussion.png');
background-position: top center;
background-repeat: no-repeat;
@include transition(width 1s, height 1s, background-color 1s, color 1s, z-index 0s);
&:hover{
width: 300px;
height: 188px;
background-color: yellow;
color: black;
z-index: 99;
}
&:active{
background-color: red;
}
}
}
}
}
}
#leftknight{
position: absolute;
width: 150px;
height: 500px;
left: -150px;
top: -50px;
background: inline-image( "knight2-back.PNG" ) no-repeat left center;
@include animation(knightani 8s);
}
@include keyframes( starani ){
0%{
@include transform(rotateY(0deg) scale(0,0));
}
100%{
@include transform(rotateY(360deg) scale(1,1));
}
}
@include keyframes( fontani ){
0%{
@include transform(translate(0px,-700px));
}
50%{
@include transform(translate(0px,-700px));
}
100%{
@include transform(translate(0px,0px));
}
}
@include keyframes( manystarani ){
0%{
opacity: 0;
}
66%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@include keyframes( linkani ){
0%{
@include transform(translate(0px,-200px));
}
75%{
@include transform(translate(0px,-200px));
}
85%{
@include transform(translate(0px,200px));
}
100%{
@include transform(translate(0px,0px));
}
}
@include keyframes( knightani ){
0%{
opacity: 0;
}
75%{
opacity: 0;
}
100%{
opacity: 1;
}
}
創作內容
[CSS3動畫]翼世界夢想領域Logo呈現
遊戲紀錄 (0)