Question

我试图仅在没有JavaScript的情况下使用@Keyframes和CSS3创建整页转换。

现在我被我的代码困住了。想知道当我点击链接时是否有可能它会创建一个从下到上移动的整页过渡：http://burtonfeelgoodsnowboard.com/test/

这是我的HTML：

<div class="moveTop">

<h1>Page</h1>

    <nav>       
        <a href="#" class="active">Page Up</a>

    </div>

这是CSS：

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}


body{
    font: 16px/1.5 'Lato', Arial, sans-serif;
    background: #3498db;
    color: #ffffff;
}

h1{
    font-size: 50px;
    font-weight: 300;
    text-align: center;
}

span{
    color: #2980b9;
    font-weight: bold;
}


h2{
  font-size: 35px;
  text-align: left;
  margin-left: -20px;
}


nav{
width: 28.09%;
margin: 0 auto;
display: block;

}

nav a {
    font-size: 19px;
 display: inline-block;
 text-align: center;
font-family: 'Lato', sans-serif;
color: #2980b9;
font-weight: 400;
padding: 5px 15px;
text-transform: uppercase;
border-radius: 2px;
letter-spacing: 1px;
text-decoration: none;
margin-right: 10px;
border: 2px solid #ecf0f1;
border-radius: none;
}

nav a.active,nav a:hover {
    background: #ecf0f1;
    color: #3498db;

}


}


.moveTop{
    -webkit-animation: moveToTop .6s ease both;
    animation: moveToTop .6s ease both;
}

@keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

我的JSFIDDLE：https://jsfiddle.net/6z5LsL6r/

任何可以向我展示OUTIUT VIA JSFIDDLE的人？

先谢谢你们！

Answer 1

您可以使用:target选择器解决问题：https://jsfiddle.net/6z5LsL6r/3/

页面转换如何

1 个答案: