html css3 锚点动画向上
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锚点与内容动画向上显示效果title>
<style type="text/css">
*{margin: 0;padding: 0px;}
@-webkit-keyframes slideupin {
0% {-webkit-transform: translateY(100%);}
100% { -webkit-transform: translateY(0%);}
}
@keyframes slideupin {
0% {transform: translateY(100%); }
100% { transform: translateY(0%);}
}
.list{width:100%;height:1000px; background:#ddd; font-size:80px;
}
.link{position: fixed;top:0;right: 0px;}
.list:target {
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-animation: slideupin .35s .05s linear forwards;
animation: slideupin .35s .05s linear forwards;
}
style>
head>
<body>
<div class="list" id="one">1div>
<div class="list" id="two">2div>
<div class="list" id="three">3div>
<div class="list" id="four">4div>
<div class="link">
<a href="#one">1a>
<a href="#two">2a>
<a href="#three">3a>
<a href="#four">4a>
div>
body>
html>