html css3 锚点动画向上
浏览数：43 /
时间：2015年06月09日
<!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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
