首页 > 代码库 > html css3 锚点动画向上
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">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>
html css3 锚点动画向上
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。