Link CSS animation
Link CSS animation
Link CSS animation by AzureMikari
Description
Description
Webdesign/Personal: http://azurelight.net
Deviant Art: http://mikaristar.deviantart.com
Artrift: http://artrift.com/Mikari/
Tumblr: http://mikariazure.tumblr.com
CSS animation, no Java Script or Flash required!
<style type="text/css" media="all">
*, body { font-family:Verdana; font-size:12px; -webkit-text-size-adjust:none;
cursor:url(design/fantasy4.cur),url(design/fantasy3.gif),crosshair; }
*:focus { outline:none; }
textarea { resize: none; }
span.bolet { font-weight:bold; }
span.itlet { font-style:italic; }
span.itabo { font-weight:bold; font-style:italic; }
table,td { border:0px none; border-collapse:collapse; vertical-align:middle;
border-spacing:0px; margin:0px auto 0px auto; padding:0px; text-align:center; }
div.left { padding:0px; margin:0px; border:0px none; text-align:left; background-color:transparent; }
button, input, textarea, select, option, a, span.textlink, #sendform, div#alnp:hover, div#codep:hover, div#sitep:hover {
cursor:url(design/fantasy2.cur),url(design/fantasy1.gif),help; }
div.part { padding:0px; margin:0px; border:0px none; text-align:center; background-color:transparent; }
img.pixgala { margin: 20px 10px 0px 10px; border:0px none; }
td.linky { padding:0px 20px 0px 20px; }
td.section { padding:14px 20px 0px 20px; }
.navilink { background-image:none; border:0px none; padding:0px; margin:0px; cursor:url(design/fantasy2.cur),url(design/fantasy1.gif),help; }
.navilink:hover { cursor:url(design/fantasy2.cur),url(design/fantasy1.gif),help; background-image:none; }
html, body { width:100%; }
ul.mylists { list-style-image:url(site/link_list.gif); margin:0px; line-height:30px; }
span.spanlist:before { content:url(site/link_list.gif); }
body { padding:0px; color:#303030; text-shadow:-1px 1px 0px #ffffff;
background-color:#abffd7; background-image:url(site/link_back2.png);
background-attachment:fixed; background-repeat:repeat-x;
margin:0px; padding:0px; line-height:20px; letter-spacing:1px;
text-align:center; font-family:Verdana; font-size:12px; }
span.navpart { font-weight:bold; color:#555555;
border:0px none; text-shadow:-1px 1px 0px #ffffff;
display:block; padding:7px; text-align:center;
background-image:url(site/link_part.png); background-repeat:repeat-x;
box-shadow: 0px 0px 7px 5px #85f5ff; background-size: auto 100%;
border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; }
a, span.textlink, #sendform { color:#60a7ff; text-shadow:-1px 1px 0px #ffffff;
letter-spacing:1px; font-weight:bold; text-decoration:none; background-image:none;
border:0px none; background-color:transparent; padding:0px 10px 0px 10px; }
a:hover, span.textlink:hover, #sendform:hover {
background-image:url(site/link_link.gif); background-repeat:repeat-x;
text-shadow:1px 1px 0px #ffffff,-1px -1px 0px #ffffff,-1px 1px 0px #ffffff,1px -1px 0px #ffffff; }
.showbor { border:0px none; background-color:#ffff6e;
padding:0px; text-shadow:-1px 1px 0px #ffffff; color:#303030;
box-shadow: 0px 0px 7px 5px #85f5ff; }
input, textarea, select, option { letter-spacing:1px; overflow:hidden;
text-shadow:-1px 1px 0px #ffffff; color:#303030; background-color:#ffff6e;
background-size: auto 100%;
background-image:url(site/link_part.png); background-repeat:repeat-x;
border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
-webkit-border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px; }
div#pagetop { margin:0px; padding:0px; width:100%; height:500px; text-align:center;
background-color:transparent; border:0px none; background-image:url(site/link_back.png);
background-repeat:repeat-x; }
div#navi { margin:0px auto 0px auto; padding:10px 0px 0px 0px; overflow:hidden;
width:942px; height:400px; text-align:center; background-repeat:no-repeat;
background-color:transparent; border:0px none; background-image:url(site/link_banner.png);
background-position: center center; background-size: 100% auto; }
div#main { margin:0px auto 0px auto; padding:0px; width:820px; text-align:center;
background-color:transparent; border:0px none; position:relative; top:-70px; }
div#endnavi { margin:0px auto 0px auto; padding:10px 0px 0px 0px;
width:800px; text-align:center; background-color:transparent; position:relative; top:-30px;
border-bottom:0px none; border-left:0px none; border-right:0px none; border-top:3px dotted #01d778; }
div#alnp { border:0px none; margin:0px; padding:0px; background-color:transparent;
width:597px; height:98px; float:left; position:relative; top:3px; left:197px; background-repeat:no-repeat;
background-image:url(site/link_azure.png); background-position: center center; background-size: 100% auto; }
div#codep { border:0px none; margin:0px; padding:0px; background-color:transparent;
width:180px; height:72px; float:left; position:relative; top:115px; left:-165px; background-repeat:no-repeat;
background-image:url(site/link_code.png); background-position: center center; background-size: 100% auto; }
div#sitep { border:0px none; margin:0px; padding:0px; background-color:transparent;
width:146px; height:71px; float:left; position:relative; top:210px; left:-175px; background-repeat:no-repeat;
background-image:url(site/link_site.png); background-position: center center; background-size: 100% auto; }
img#face { float:left; position:relative; top:-45px; left:-580px;
max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
img#arrow1 { float:left; position:relative; top:-190px; left:270px;
max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
img#arrow2 { float:left; position:relative; top:-90px; left:260px;
max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
img#archer { float:left; position:relative; top:-300px; left:380px; }
img#fairy { float:left; position:relative; top:-55px; left:-400px; }
#navi {
animation-name: theback;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes theback {
0% { background-size: 0% auto; }
10% { background-size: 100% auto; }
100% { background-size: 100% auto; } }
div#alnp {
animation-name: word1;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes word1 {
0% { background-size: 0% auto; }
10% { background-size: 0% auto; }
20% { background-size: 100% auto; }
100% { background-size: 100% auto; } }
img#face { animation-name: spin1; }
img#arrow1 { animation-name: spin2; }
img#arrow2 { animation-name: spin3; }
img#face, img#arrow1, img#arrow2 {
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes spin1 {
0% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
20% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
30% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
100% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } }
@keyframes spin2 {
0% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
30% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
40% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
100% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } }
@keyframes spin3 {
0% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
40% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
50% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
100% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } }
img#archer { animation-name: jumping;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes jumping {
0% { top:-770px; left:380px; }
50% { top:-770px; left:380px; width:210px; height:400px; }
60% { top:-300px; left:380px; width:210px; height:400px; }
63% { top:-280px; left:370px; width:230px; height:380px; }
66% { top:-300px; left:380px; width:210px; height:400px; }
100% { top:-300px; left:380px; width:210px; height:400px; } }
img#fairy, .navilink2 { animation-name: flying;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes flying {
0% { opacity:0.0; }
50% { opacity:0.0; }
60% { left:-400px; }
63% { left:-420px; }
65% { opacity:1.0; }
66% { left:-400px; }
100% { opacity:1.0; } }
div#codep, div#sitep {
animation-name: word2;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes word2 {
0% { background-size: 0% auto; }
67% { background-size: 0% auto; }
77% { background-size: 100% auto; }
100% { background-size: 100% auto; } }
</style> </head> <body>
<div id="pagetop">
<div id="navi">
<a class="navilink" href="http://azurelight.net"><div id="alnp" class="navilink"></div></a>
<a class="navilink" href="http://azurelight.net/code0.php"><div id="codep" class="navilink"></div></a>
<a class="navilink" href="http://azurelight.net/about.php"><div id="sitep" class="navilink"></div></a>
<div style="width:217px; height:209px; float:left;"><img id="face" src="site/link_face.png" alt="AzureLight.net" /></div>
<div style="width:177px; height:175px; float:left;"><img id="arrow1" src="site/link_arrow1.png" alt="AzureLight.net" /></div>
<div style="width:175px; height:171px; float:left;"><img id="arrow2" src="site/link_arrow2.png" alt="AzureLight.net" /></div>
<img id="archer" src="site/link_archer.png" alt="AzureLight.net" style="width:210px; height:400px;" />
<img id="fairy" src="site/link_navi.png" alt="AzureLight.net" />
</div> </div>
Deviant Art: http://mikaristar.deviantart.com
Artrift: http://artrift.com/Mikari/
Tumblr: http://mikariazure.tumblr.com
CSS animation, no Java Script or Flash required!
<style type="text/css" media="all">
*, body { font-family:Verdana; font-size:12px; -webkit-text-size-adjust:none;
cursor:url(design/fantasy4.cur),url(design/fantasy3.gif),crosshair; }
*:focus { outline:none; }
textarea { resize: none; }
span.bolet { font-weight:bold; }
span.itlet { font-style:italic; }
span.itabo { font-weight:bold; font-style:italic; }
table,td { border:0px none; border-collapse:collapse; vertical-align:middle;
border-spacing:0px; margin:0px auto 0px auto; padding:0px; text-align:center; }
div.left { padding:0px; margin:0px; border:0px none; text-align:left; background-color:transparent; }
button, input, textarea, select, option, a, span.textlink, #sendform, div#alnp:hover, div#codep:hover, div#sitep:hover {
cursor:url(design/fantasy2.cur),url(design/fantasy1.gif),help; }
div.part { padding:0px; margin:0px; border:0px none; text-align:center; background-color:transparent; }
img.pixgala { margin: 20px 10px 0px 10px; border:0px none; }
td.linky { padding:0px 20px 0px 20px; }
td.section { padding:14px 20px 0px 20px; }
.navilink { background-image:none; border:0px none; padding:0px; margin:0px; cursor:url(design/fantasy2.cur),url(design/fantasy1.gif),help; }
.navilink:hover { cursor:url(design/fantasy2.cur),url(design/fantasy1.gif),help; background-image:none; }
html, body { width:100%; }
ul.mylists { list-style-image:url(site/link_list.gif); margin:0px; line-height:30px; }
span.spanlist:before { content:url(site/link_list.gif); }
body { padding:0px; color:#303030; text-shadow:-1px 1px 0px #ffffff;
background-color:#abffd7; background-image:url(site/link_back2.png);
background-attachment:fixed; background-repeat:repeat-x;
margin:0px; padding:0px; line-height:20px; letter-spacing:1px;
text-align:center; font-family:Verdana; font-size:12px; }
span.navpart { font-weight:bold; color:#555555;
border:0px none; text-shadow:-1px 1px 0px #ffffff;
display:block; padding:7px; text-align:center;
background-image:url(site/link_part.png); background-repeat:repeat-x;
box-shadow: 0px 0px 7px 5px #85f5ff; background-size: auto 100%;
border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; }
a, span.textlink, #sendform { color:#60a7ff; text-shadow:-1px 1px 0px #ffffff;
letter-spacing:1px; font-weight:bold; text-decoration:none; background-image:none;
border:0px none; background-color:transparent; padding:0px 10px 0px 10px; }
a:hover, span.textlink:hover, #sendform:hover {
background-image:url(site/link_link.gif); background-repeat:repeat-x;
text-shadow:1px 1px 0px #ffffff,-1px -1px 0px #ffffff,-1px 1px 0px #ffffff,1px -1px 0px #ffffff; }
.showbor { border:0px none; background-color:#ffff6e;
padding:0px; text-shadow:-1px 1px 0px #ffffff; color:#303030;
box-shadow: 0px 0px 7px 5px #85f5ff; }
input, textarea, select, option { letter-spacing:1px; overflow:hidden;
text-shadow:-1px 1px 0px #ffffff; color:#303030; background-color:#ffff6e;
background-size: auto 100%;
background-image:url(site/link_part.png); background-repeat:repeat-x;
border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
-webkit-border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px; }
div#pagetop { margin:0px; padding:0px; width:100%; height:500px; text-align:center;
background-color:transparent; border:0px none; background-image:url(site/link_back.png);
background-repeat:repeat-x; }
div#navi { margin:0px auto 0px auto; padding:10px 0px 0px 0px; overflow:hidden;
width:942px; height:400px; text-align:center; background-repeat:no-repeat;
background-color:transparent; border:0px none; background-image:url(site/link_banner.png);
background-position: center center; background-size: 100% auto; }
div#main { margin:0px auto 0px auto; padding:0px; width:820px; text-align:center;
background-color:transparent; border:0px none; position:relative; top:-70px; }
div#endnavi { margin:0px auto 0px auto; padding:10px 0px 0px 0px;
width:800px; text-align:center; background-color:transparent; position:relative; top:-30px;
border-bottom:0px none; border-left:0px none; border-right:0px none; border-top:3px dotted #01d778; }
div#alnp { border:0px none; margin:0px; padding:0px; background-color:transparent;
width:597px; height:98px; float:left; position:relative; top:3px; left:197px; background-repeat:no-repeat;
background-image:url(site/link_azure.png); background-position: center center; background-size: 100% auto; }
div#codep { border:0px none; margin:0px; padding:0px; background-color:transparent;
width:180px; height:72px; float:left; position:relative; top:115px; left:-165px; background-repeat:no-repeat;
background-image:url(site/link_code.png); background-position: center center; background-size: 100% auto; }
div#sitep { border:0px none; margin:0px; padding:0px; background-color:transparent;
width:146px; height:71px; float:left; position:relative; top:210px; left:-175px; background-repeat:no-repeat;
background-image:url(site/link_site.png); background-position: center center; background-size: 100% auto; }
img#face { float:left; position:relative; top:-45px; left:-580px;
max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
img#arrow1 { float:left; position:relative; top:-190px; left:270px;
max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
img#arrow2 { float:left; position:relative; top:-90px; left:260px;
max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
img#archer { float:left; position:relative; top:-300px; left:380px; }
img#fairy { float:left; position:relative; top:-55px; left:-400px; }
#navi {
animation-name: theback;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes theback {
0% { background-size: 0% auto; }
10% { background-size: 100% auto; }
100% { background-size: 100% auto; } }
div#alnp {
animation-name: word1;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes word1 {
0% { background-size: 0% auto; }
10% { background-size: 0% auto; }
20% { background-size: 100% auto; }
100% { background-size: 100% auto; } }
img#face { animation-name: spin1; }
img#arrow1 { animation-name: spin2; }
img#arrow2 { animation-name: spin3; }
img#face, img#arrow1, img#arrow2 {
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes spin1 {
0% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
20% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
30% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
100% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } }
@keyframes spin2 {
0% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
30% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
40% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
100% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } }
@keyframes spin3 {
0% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
40% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
50% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
100% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } }
img#archer { animation-name: jumping;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes jumping {
0% { top:-770px; left:380px; }
50% { top:-770px; left:380px; width:210px; height:400px; }
60% { top:-300px; left:380px; width:210px; height:400px; }
63% { top:-280px; left:370px; width:230px; height:380px; }
66% { top:-300px; left:380px; width:210px; height:400px; }
100% { top:-300px; left:380px; width:210px; height:400px; } }
img#fairy, .navilink2 { animation-name: flying;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes flying {
0% { opacity:0.0; }
50% { opacity:0.0; }
60% { left:-400px; }
63% { left:-420px; }
65% { opacity:1.0; }
66% { left:-400px; }
100% { opacity:1.0; } }
div#codep, div#sitep {
animation-name: word2;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }
@keyframes word2 {
0% { background-size: 0% auto; }
67% { background-size: 0% auto; }
77% { background-size: 100% auto; }
100% { background-size: 100% auto; } }
</style> </head> <body>
<div id="pagetop">
<div id="navi">
<a class="navilink" href="http://azurelight.net"><div id="alnp" class="navilink"></div></a>
<a class="navilink" href="http://azurelight.net/code0.php"><div id="codep" class="navilink"></div></a>
<a class="navilink" href="http://azurelight.net/about.php"><div id="sitep" class="navilink"></div></a>
<div style="width:217px; height:209px; float:left;"><img id="face" src="site/link_face.png" alt="AzureLight.net" /></div>
<div style="width:177px; height:175px; float:left;"><img id="arrow1" src="site/link_arrow1.png" alt="AzureLight.net" /></div>
<div style="width:175px; height:171px; float:left;"><img id="arrow2" src="site/link_arrow2.png" alt="AzureLight.net" /></div>
<img id="archer" src="site/link_archer.png" alt="AzureLight.net" style="width:210px; height:400px;" />
<img id="fairy" src="site/link_navi.png" alt="AzureLight.net" />
</div> </div>
General Info
General Info
Ratings
Category Games » - by Publisher » Nintendo » Legend of Zelda series » Link
Date Submitted
Views 679
Favorites... 0
Vote Score 0
Category Games » - by Publisher » Nintendo » Legend of Zelda series » Link
Date Submitted
Views 679
Favorites... 0
Vote Score 0
Comments
0
Media Digital drawing or painting
Time Taken
Reference
Media Digital drawing or painting
Time Taken
Reference
Comments
You are not authorized to comment here. Your must be registered and logged in to comment