CSS动画和Jquery2 | CSS动画和Jquery2

本文介绍了CSS动画和Jquery2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我需要帮助制作互动网站，类似于 briandelaney.com 。我特别想要合并设计器使用的链接之间的幻灯片效果。我读他的代码，但我不熟悉Javascript，但熟悉Jquery。点击链接时，我想滑动我的菜单。如何在这个输入后使用Javascript对CSS变换进行动画处理？我想要动画的代码部分是在JSFiddle。以下是动画的代码 http://jsfiddle.net/1pc4f081/3/ 。 < section> < div class ='homecard'style =height：815px;> / *最初，菜单是页面中心的一张卡片。我想让这个滑动到页面的顶部当一个链接被点击* / < div class =menu home appearid =mainmenu> < ul> < li class =hover-effect1> < a href =/ aboutclass =main-menu about-link> < span class =effectdata-hover =关于> < span class =what> < span>关于< / span> < / span> < / span> < / a> < div class =border right> < div>< / div> < / div> < / li> < li class =hover-effect> < a href =/ servicesclass =main-menu service-link> < span class =effectdata-hover =服务> < span class =what> < span>服务< / span> < / span> < / span> < / a> < div class =border right> < div>< / div> < / div> < / li> < li class =hover-effect 3> < a href =contactclass =main-menu contact-link> < span class =effectdata-hover =Contact> < span class =what> < span>联系人< / span> < / span> < / span> < / a> < / li> < / ul> < / div> < / div> css： .homecard { -webkit-animation-name：pushHeaderUp; -moz-animation-name：pushHeaderUp; animation-name：pushHeaderUp; -moz-animation-duration：3s; -moz-animation-iteration-count：1; -moz-animation-timing-function：ease; -moz-animation-fill-mode：forward; -wibkit-animation-duration：3s; -webkit-animation-iteration-count：1; -webkit-animation-timing-function：ease; -webkit-animation-fill-mode：forward; animation-duration：3s; animation-timing-function：ease; animation-fill-mode：forward; } @keyframes pushHeaderUp { 0％{ -webkit-transform：translateY（0px）; transform：translateY（0px）; -moz-transform：transloateY（0px）} 60％{ -webkit-transform：translateY（-180px）; transform：translateY（180px）; -moz-transform：translateY：（ - 180px）} 100％{ -webkit-transform：translateY（-240px）; transform：translateY（-240px）; -moz-transform：translateY（-240px）} } JS $（document）.ready（function $（'。main-menu'）。click（function（）{ $（'。homecard'）。addClass（'。pushHeaderUp'）; }）; 解决方案这是我的朋友的整个教程。 step - 1个完整的HTML结构元素！DOCTYPE html> < html> < head> < meta charset =UTF-8/> < meta http-equiv =X -UA-Compatiblecontent =IE = edge，chrome = 1> < title>< / title> < meta name =viewportcontent = width name =descriptioncontent =/> < meta name =width，height = device-height，initial-scale = 1.0，minimal-ui/> keywordscontent =/> < meta name =authorcontent =/> < link rel =shortcut iconhref =favicon.ico> <！ - < link rel =stylesheettype =text / csshref =/> - > < style>< / style> < / head> < body> < header class =container text-center> <！ - header content in here - > < div class =row text-center> <！ - row - > < figure class =pull-left text-left> <！ - Logo goes here - > < img scr = /> < figcaption> abc< / figcaption> < / figure> < nav> <！ - 导航菜单在这里 - > < a data-hash = about> about< / a> < a data-hash = work> work< / a> < a data-hash = process>过程< / a> < a data-hash = contact> contact< / a> < / nav> < div class = pull-right> <！ - 社交菜单在这里 - > < menu class = pull-left> < li> 1< / li> < li> 2< / li> < li> 3< / li> < / menu> < / div> < / div> < / header> < main class = container-fluid> <！ - 页面内容在这里 - > < section class = container data-content = about> < article class = row>< / article> < / section> < section class = container data-content = work> < article class = row>< / article> < / section> < section class = container data-content = process> < article class = row>< / article> < / section> < section class = container data-content = contact> < article class = row>< / article> < / section> < / main> < / body> < / html> step - 2 css结构 * {box-sizing：border-box; padding：0; margin：0} ：root {width：100vw; height：100wh} .container {width：100％} .row {width：960px; margin：0 auto} .text-left {text-align：left} .text-center {text-align：center} .text-right {text- align：right} .pull-left {float：left} .pull-right {float：right} nav a，menu li {display： inline} main { position：fixed; top：50px; left：0; right：0; bottom：0; overflow：hidden } main section.container { position：absolute; top：100vh; left：0; width：100％; height：100％; backface-visibility：hidden; will-change：opacity，top; transform：translate3d（0,0,0）; z-index：-1; opacity：0; overflow-y：auto; transition：opacity 0.3s ease，top 0.3s .1s ease; } main section.container.visible { opacity：1; z-index：1; top：0; } main section [data-content = about] {background-color：green} main section [data-content = work] {background-color：red} main section [data-content = process] {background-color：yellow} main section [data-content = contact] {background-color：purple} step -3方法 step - 3.1 css方法 <！DOCTYPE html>< html> < head> < meta charset =UTF-8/> < meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1> < title>< / title> < meta name =viewportcontent =width = device-width，height = device-height，initial-scale = 1.0，minimal-ui/> < meta name =descriptioncontent =/> < meta name =keywordscontent =/> < meta name =authorcontent =/> < link rel =shortcut iconhref =favicon.ico> <！ - < link rel =stylesheettype =text / csshref =/> < style> * {box-sizing：border-box; padding：0; margin：0}：root {width：100vw; height：100wh} .container {width：100％} .row {width：960px; margin：0 auto} .text-left {text-align：left} .text-center {text-align：center} .text-right {text-align：right} .pull- right {float：right} nav a，menu li，nav label {display：inline; margin：4px} nav a.active {color：red} main {position：fixed; top：50px; left：0; right：0; bottom：0; overflow：hidden} main section.container {position：absolute; top：100vh; left：0; width：100％;高度：100％; backface-visibility：hidden; will-change：opacity，top; transform：translate3d（0,0,0）; z-index：-1;不透明度：0; overflow-y：auto;过渡：不透明度0.3s轻松，前0.3s .1s轻松; } #aboutInput：checked〜header nav label [for = aboutInput] a，#workInput：checked〜header nav label [for = workInput] a，#processInput：checked〜header nav label [for = processInput] a，#contactInput：checked 〜header nav label [for = contactInput] a，main section.container.visible {color：red} #aboutInput：checked〜main section [data-content = about]，#workInput：checked〜main section [data-content = work ]，#processInput：checked〜main section [data-content = process]，#contactInput：checked〜main section [data-content = contact]，main section.container.visible {opacity：1; z-index：1; top：0; } main section [data-content = about] {background-color：green} main section [data-content = work] {background-color：red} section [data-content = contact] {background-color：purple}< / style> < / head> < body> < input type = radio name = radio id = aboutInput checked hidden /> < input type = radio name = radio id = workInput hidden /> < input type = radio name = radio id = processInput hidden /> < input type = radio name = radio id = contactInput hidden /> < header class =container text-center> <！ - header content goes here here - > < div class =row text-center> <！ - row - > < figure class =pull-left text-left> <！ - Logo goes here - > < img scr = /> < figcaption> abc< / figcaption> < / figure> < nav> <！ - 导航菜单在这里 - > < label for = aboutInput>< a data-hash = about> about< / a>< / label> < label for = workInput>< a data-hash = work> work< / a>< / label> < label for = processInput>< a data-hash = process>过程< / a>< / label> < label for = contactInput>< a data-hash = contact> contact< / a>< / label> < / nav> < div class = pull-right> <！ - 社交菜单在这里 - > < menu class = pull-left> < li> 1< / li> < li> 2< / li> < li> 3< / li> < / menu& < / div> < / div> < / header> < main class = container-fluid> <！ - 页面内容在这里 - > < section class = container data-content = about> < article class = row>< / article> < / section> < section class = container data-content = work> < article class = row>< / article> < / section> < section class = container data-content = process> < article class = row>< / article> < / section> < section class = container data-content = contact> < article class = row>< / article> < / section> < / main> < / body>< / html> step - 3.2 Javascript方法 <！DOCTYPE html& < html> < head> < meta charset =UTF-8/> < meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1> < title>< / title> < meta name =viewportcontent =width = device-width，height = device-height，initial-scale = 1.0，minimal-ui/> < meta name =descriptioncontent =/> < meta name =keywordscontent =/> < meta name =authorcontent =/> < link rel =shortcut iconhref =favicon.ico> <！ - < link rel =stylesheettype =text / csshref =/> < style> * {box-sizing：border-box; padding：0; margin：0}：root {width：100vw; height：100wh} .container {width：100％} .row {width：960px; margin：0 auto} .text-left {text-align：left} .text-center {text-align：center} .text-right {text-align：right} .pull- right {float：right} nav a，menu li，nav label {display：inline; margin：4px} nav a.active {color：red} main {position：fixed; top：50px; left：0; right：0; bottom：0; overflow：hidden} main section.container {position：absolute; top：100vh; left：0; width：100％;高度：100％; backface-visibility：hidden; will-change：opacity，top; transform：translate3d（0,0,0）; z-index：-1;不透明度：0; overflow-y：auto;过渡：不透明度0.3s，顶部0.3s .1s立方贝塞尔（0.385，-0.600，0.610,1.555）; } main section.container.visible {opacity：1; z-index：1; top：0; } main section [data-content = about] {background-color：green} main section [data-content = work] {background-color：red} section [data-content = contact] {background-color：purple}< / style> < / head> < body> < header class = container> <！ - header content goes here here - > < div class =row text-center> <！ - row - > < figure class = pull-left> <！ - Logo goes here - > < img scr = /> < figcaption> abc< / figcaption> < / figure> < nav> <！ - 导航菜单在这里 - > < a data-hash = about class = active> about< / a> < a data-hash = work> work< / a> < a data-hash = process>过程< / a> < a data-hash = contact> contact< / a> < / nav> < div class = pull-right> <！ - 社交菜单在这里 - > < menu class = pull-left> < li> 1< / li> < li> 2< / li> < li> 3< / li> < / menu> < / div> < / div> < / header> < main class = container-fluid> <！ - 页面内容在这里 - > < section class =container visibledata-content = about> < article class = row>< / article> < / section> < section class = container data-content = work> < article class = row>< / article> < / section> < section class = container data-content = process> < article class = row>< / article> < / section> < section class = container data-content = contact> < article class = row>< / article> < / section> < / main> < script> //你需要这个来运行代码一旦窗口完全加载window.addEventListener（'load'，function（event）{function returnDataHash（）{var navAnchors = document.querySelectorAll（nav a），dataHash = this。 getAttribute（data-hash），hashSection =data-content =+ dataHash，sectionContainer = document.querySelector（[+ hashSection +]），sectionContainers = document.querySelectorAll（main section.container） ; for（var j = 0; j< sectionContainers.length; j ++）{sectionContainers [j] .classList.remove（visible）;} for（var y = 0; y step - 3.3 Jquery <！DOCTYPE html> < html> < head> < meta charset =UTF-8/> < meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1> < title>< / title> < meta name =viewportcontent =width = device-width，height = device-height，initial-scale = 1.0，minimal-ui/> < meta name =descriptioncontent =/> < meta name =keywordscontent =/> < meta name =authorcontent =/> < link rel =shortcut iconhref =favicon.ico> <！ - < link rel =stylesheettype =text / csshref =/> < style> * {box-sizing：border-box; padding：0; margin：0}：root {width：100vw; height：100wh} .container {width：100％} .row {width：960px; margin：0 auto} .text-left {text-align：left} .text-center {text-align：center} .text-right {text-align：right} .pull- right {float：right} nav a，menu li，nav label {display：inline; margin：4px} nav a.active {color：red} main {position：fixed; top：50px; left：0; right：0; bottom：0; overflow：hidden} main section.container {position：absolute; top：100vh; left：0; width：100％;高度：100％; backface-visibility：hidden; will-change：opacity，top; transform：translate3d（0,0,0）; z-index：-1;不透明度：0; overflow-y：auto;过渡：不透明度0.3s轻松，前0.3s .1s轻松; } main section.container.visible {opacity：1; z-index：1; top：0; } main section [data-content = about] {background-color：green} main section [data-content = work] {background-color：red} section [data-content = contact] {background-color：purple}< / style> < / head> < body> < header class = container> <！ - header content goes here here - > < div class =row text-center> <！ - row - > < figure class = pull-left> <！ - Logo goes here - > < img scr = /> < figcaption> abc< / figcaption> < / figure> < nav> <！ - 导航菜单在这里 - > < a data-hash = about class = active> about< / a> < a data-hash = work> work< / a> < a data-hash = process>过程< / a> < a data-hash = contact> contact< / a> < / nav> < div class = pull-right> <！ - 社交菜单在这里 - > < menu class = pull-left> < li> 1< / li> < li> 2< / li> < li> 3< / li> < / menu> < / div> < / div> < / header> < main class = container-fluid> <！ - 页面内容在这里 - > < section class =container visibledata-content = about> < article class = row>< / article> < / section> < section class = container data-content = work> < article class = row>< / article> < / section> < section class = container data-content = process> < article class = row>< / article> < / section> < section class = container data-content = contact> < article class = row>< / article> < / section> < / main> < script src = https：//code.jquery.com/jquery-2.1.3.min.js>< / script> < script> //你需要这个来运行代码一旦窗口完全加载$（document）.ready（function（）{$（nav a）click（function（）{var dataHash = $（this）.attr data-hash）; $（this）.addClass（active）。siblings（）。removeClass（active）; $（main section [data-content =+ dataHash +]）。addClass （visible）。siblings（）。removeClass（visible）;}）}）; < / script> < / body> < / html> $ c> ease function in transition：opacity 0.3s ease，top 0.3s .1s ease; c> elastic 。请查看 Ceaser - CSS缓动动画工具或缓冲函数备忘单 I need help making an interactive website, similar to briandelaney.com .I especially want to incorporate the slide effect between links that the designer used. I read his code but I am not fluent in Javascript, but am familiar with Jquery.I want to slide my menu when a link is clicked. How do I animate the CSS transforms with Javascript after this input? The section of code I want animated is on JSFiddle. Here's the code for the animation http://jsfiddle.net/1pc4f081/3/.<section><div class='homecard' style="height:815px;">/* Initially, the menu is a card in the center of the page. I want this to slide to the top of the page when a link is clicked */ <div class="menu home appear" id="mainmenu"> <ul> <li class="hover-effect1"> <a href="/about" class="main-menu about-link"> <span class="effect" data-hover="About"> <span class="what"> <span> About</span> </span> </span> </a> <div class="border right"> <div></div> </div> </li> <li class="hover-effect"> <a href="/services" class="main-menu service-link"> <span class="effect" data-hover="Services"> <span class="what"> <span> Services</span> </span> </span> </a> <div class="border right"> <div></div> </div> </li> <li class="hover-effect 3"> <a href="contact" class="main-menu contact-link"> <span class="effect" data-hover="Contact"> <span class="what"> <span> Contact</span> </span> </span> </a> </li> </ul> </div></div>css:.homecard {-webkit-animation-name: pushHeaderUp;-moz-animation-name:pushHeaderUp;animation-name:pushHeaderUp;-moz-animation-duration:3s;-moz-animation-iteration-count:1;-moz-animation-timing-function:ease;-moz-animation-fill-mode:forwards;-webkit-animation-duration:3s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode: forwards;animation-duration:3s;animation-timing-function:ease;animation-fill-mode: forwards;}@keyframes pushHeaderUp {0% { -webkit-transform:translateY(0px); transform:translateY(0px); -moz-transform:transloateY(0px)}60% { -webkit-transform:translateY(-180px); transform:translateY(180px); -moz-transform:translateY:(-180px)}100% { -webkit-transform:translateY(-240px); transform:translateY(-240px); -moz-transform:translateY(-240px)}}JS$(document).ready(function () {$('.main-menu').click(function () { $('.homecard').addClass('.pushHeaderUp');}); 解决方案 Well that is a whole tutorial my friend.step - 1 Full HTML structural elements <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <link rel="shortcut icon" href="favicon.ico">  <style></style> </head> <body> <header class="container text-center">  <div class="row text-center" >  <figure class="pull-left text-left">  <img scr= /> <figcaption>abc</figcaption> </figure> <nav>  <a data-hash=about>about</a> <a data-hash=work>work</a> <a data-hash=process>process</a> <a data-hash=contact>contact</a> </nav> <div class=pull-right>  <menu class=pull-left> <li>1</li> <li>2</li> <li>3</li> </menu> </div> </div> </header> <main class=container-fluid>  <section class=container data-content=about> <article class=row></article> </section> <section class=container data-content=work> <article class=row></article> </section> <section class=container data-content=process> <article class=row></article> </section> <section class=container data-content=contact> <article class=row></article> </section> </main> </body> </html>step - 2 The css structure *{box-sizing: border-box; padding: 0; margin: 0} :root{width: 100vw; height: 100wh} .container{width: 100%} .row{width: 960px; margin: 0 auto} .text-left{text-align: left} .text-center{text-align: center} .text-right{text-align: right} .pull-left{float: left} .pull-right{float: right} nav a, menu li{display: inline} main{ position: fixed; top: 50px; left: 0; right: 0; bottom: 0; overflow: hidden } main section.container{ position: absolute; top: 100vh; left:0; width: 100%; height: 100%; backface-visibility: hidden; will-change: opacity, top; transform: translate3d(0,0,0); z-index:-1; opacity: 0; overflow-y: auto; transition: opacity 0.3s ease, top 0.3s .1s ease; } main section.container.visible{ opacity: 1; z-index:1; top: 0; } main section[data-content=about]{background-color: green} main section[data-content=work]{background-color:red} main section[data-content=process]{background-color:yellow} main section[data-content=contact]{background-color:purple}step -3 The approachstep - 3.1 the css approach<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <link rel="shortcut icon" href="favicon.ico">  <style> *{box-sizing: border-box; padding: 0; margin: 0} :root{width: 100vw; height: 100wh} .container{width: 100%} .row{width: 960px; margin: 0 auto} .text-left{text-align: left} .text-center{text-align: center} .text-right{text-align: right} .pull-left{float: left} .pull-right{float: right} nav a, menu li, nav label{display: inline; margin: 4px} nav a.active{color:red} main{ position: fixed; top: 50px; left: 0; right: 0; bottom: 0; overflow: hidden } main section.container{ position: absolute; top: 100vh; left:0; width: 100%; height: 100%; backface-visibility: hidden; will-change: opacity, top; transform: translate3d(0,0,0); z-index:-1; opacity: 0; overflow-y: auto; transition: opacity 0.3s ease, top 0.3s .1s ease; } #aboutInput:checked ~ header nav label[for=aboutInput] a, #workInput:checked ~ header nav label[for=workInput] a, #processInput:checked ~ header nav label[for=processInput] a, #contactInput:checked ~ header nav label[for=contactInput] a, main section.container.visible{ color: red } #aboutInput:checked ~ main section[data-content=about], #workInput:checked ~ main section[data-content=work], #processInput:checked ~ main section[data-content=process], #contactInput:checked ~ main section[data-content=contact], main section.container.visible{ opacity: 1; z-index:1; top: 0; } main section[data-content=about]{background-color: green} main section[data-content=work]{background-color:red} main section[data-content=process]{background-color:yellow} main section[data-content=contact]{background-color:purple} </style> </head> <body> <input type=radio name=radio id=aboutInput checked hidden/> <input type=radio name=radio id=workInput hidden/> <input type=radio name=radio id=processInput hidden/> <input type=radio name=radio id=contactInput hidden/> <header class="container text-center">  <div class="row text-center" >  <figure class="pull-left text-left">  <img scr= /> <figcaption>abc</figcaption> </figure> <nav>  <label for=aboutInput><a data-hash=about>about</a></label> <label for=workInput><a data-hash=work>work</a></label> <label for=processInput><a data-hash=process>process</a></label> <label for=contactInput><a data-hash=contact>contact</a></label> </nav> <div class=pull-right>  <menu class=pull-left> <li>1</li> <li>2</li> <li>3</li> </menu> </div> </div> </header> <main class=container-fluid>  <section class=container data-content=about> <article class=row></article> </section> <section class=container data-content=work> <article class=row></article> </section> <section class=container data-content=process> <article class=row></article> </section> <section class=container data-content=contact> <article class=row></article> </section> </main> </body></html>step - 3.2 Javascript approach <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <link rel="shortcut icon" href="favicon.ico">  <style> *{box-sizing: border-box; padding: 0; margin: 0} :root{width: 100vw; height: 100wh} .container{width: 100%} .row{width: 960px; margin: 0 auto} .text-left{text-align: left} .text-center{text-align: center} .text-right{text-align: right} .pull-left{float: left} .pull-right{float: right} nav a, menu li, nav label{display: inline; margin: 4px} nav a.active{color: red} main{ position: fixed; top: 50px; left: 0; right: 0; bottom: 0; overflow: hidden } main section.container{ position: absolute; top: 100vh; left:0; width: 100%; height: 100%; backface-visibility: hidden; will-change: opacity, top; transform: translate3d(0,0,0); z-index:-1; opacity: 0; overflow-y: auto; transition: opacity 0.3s ease, top 0.3s .1s cubic-bezier(0.385, -0.600, 0.610, 1.555); } main section.container.visible{ opacity: 1; z-index:1; top: 0; } main section[data-content=about]{background-color: green} main section[data-content=work]{background-color:red} main section[data-content=process]{background-color:yellow} main section[data-content=contact]{background-color:purple} </style> </head> <body> <header class=container>  <div class="row text-center" >  <figure class=pull-left>  <img scr= /> <figcaption>abc</figcaption> </figure> <nav>  <a data-hash=about class=active>about</a> <a data-hash=work>work</a> <a data-hash=process>process</a> <a data-hash=contact>contact</a> </nav> <div class=pull-right>  <menu class=pull-left> <li>1</li> <li>2</li> <li>3</li> </menu> </div> </div> </header> <main class=container-fluid>  <section class="container visible" data-content=about> <article class=row></article> </section> <section class=container data-content=work> <article class=row></article> </section> <section class=container data-content=process> <article class=row></article> </section> <section class=container data-content=contact> <article class=row></article> </section> </main> <script> //You need this to run the code once the window has fully loaded window.addEventListener('load', function(event) { function returnDataHash () { var navAnchors = document.querySelectorAll("nav a"), dataHash = this.getAttribute("data-hash"), hashSection = "data-content=" + dataHash, sectionContainer = document.querySelector("["+ hashSection +"]"), sectionContainers = document.querySelectorAll("main section.container"); for ( var j = 0; j < sectionContainers.length; j++) { sectionContainers[j].classList.remove("visible"); } for ( var y = 0; y < navAnchors.length; y++) { navAnchors[y].classList.remove("active"); } sectionContainer.classList.add("visible"); this.classList.add("active"); } //main section.container.visible var navElements = document.querySelectorAll("nav a"); for (var i = 0; i < navElements.length; i++) { navElements[i].addEventListener("click", returnDataHash ,false) } }, false) </script> </body> </html>step - 3.3 Jquery approach <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <link rel="shortcut icon" href="favicon.ico">  <style> *{box-sizing: border-box; padding: 0; margin: 0} :root{width: 100vw; height: 100wh} .container{width: 100%} .row{width: 960px; margin: 0 auto} .text-left{text-align: left} .text-center{text-align: center} .text-right{text-align: right} .pull-left{float: left} .pull-right{float: right} nav a, menu li, nav label{display: inline; margin: 4px} nav a.active{color: red} main{ position: fixed; top: 50px; left: 0; right: 0; bottom: 0; overflow: hidden } main section.container{ position: absolute; top: 100vh; left:0; width: 100%; height: 100%; backface-visibility: hidden; will-change: opacity, top; transform: translate3d(0,0,0); z-index:-1; opacity: 0; overflow-y: auto; transition: opacity 0.3s ease, top 0.3s .1s ease; } main section.container.visible{ opacity: 1; z-index:1; top: 0; } main section[data-content=about]{background-color: green} main section[data-content=work]{background-color:red} main section[data-content=process]{background-color:yellow} main section[data-content=contact]{background-color:purple} </style> </head> <body> <header class=container>  <div class="row text-center" >  <figure class=pull-left>  <img scr= /> <figcaption>abc</figcaption> </figure> <nav>  <a data-hash=about class=active>about</a> <a data-hash=work>work</a> <a data-hash=process>process</a> <a data-hash=contact>contact</a> </nav> <div class=pull-right>  <menu class=pull-left> <li>1</li> <li>2</li> <li>3</li> </menu> </div> </div> </header> <main class=container-fluid>  <section class="container visible" data-content=about> <article class=row></article> </section> <section class=container data-content=work> <article class=row></article> </section> <section class=container data-content=process> <article class=row></article> </section> <section class=container data-content=contact> <article class=row></article> </section> </main> <script src=https://code.jquery.com/jquery-2.1.3.min.js ></script> <script> // You need this to run the code once the window has fully loaded $( document ).ready(function() { $("nav a").click( function () { var dataHash = $(this).attr("data-hash"); $(this).addClass("active").siblings().removeClass("active"); $("main section[data-content=" + dataHash + "]").addClass("visible").siblings().removeClass("visible"); }) }); </script> </body> </html>Now you can change the ease function in transition: opacity 0.3s ease, top 0.3s .1s ease; as you like to make it elastic. Have a look at Ceaser - CSS Easing Animation Tool or Easing Functions Cheat Sheet 这篇关于CSS动画和Jquery2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！