<!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">1</div> <div class="list" id="two">2</div> <div class="list" id="three">3</div> <div class="list" id="four">4</div> <div class="link"> <a href="#one">1</a> <a href="#two">2</a> <a href="#three">3</a> <a href="#four">4</a> </div> </body> </html>