Question

我正在创建一个单页网站，当点击链接时，我的内容会在页面上滑动（从左到右，缓慢超过1秒）。不幸的是，我在转换工作方面绝对没有运气。

我可以使用：hover来转换.content类，但似乎无法实现任何转换/动画效果。理想情况下，我希望＃home，＃portfolio，＃contact和#cv成为插入的元素，但现在几个小时都没有运气。

我想知道是否是因为设置了一个包含我所有幻灯片的袖子？

这是相关部分的CSS代码：

#sleeve { 
        position: relative;
        top: 35%;
        width: 400%;
        z-index: 2;
        height: 60%;
    }

#home, #portfolio, #contact, #cv {
        background: aqua;
        width: 25%;
        margin: 0;
        position: relative;
        z-index: 2;
        float: left;
        height: 100%;

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; 
    }

#home:target ~ #header #navigation #home,
#portfolio:target ~ #header #navigation #portfolio,
#contact:target ~ #header #navigation #contact ,
#cv:target ~ #header #navigation #cv { 
    background: white;
margin-left: 0%;
}


.content {
width: 70%;
min-height: 40%;
margin-left: 15%;
margin-right: 15%;
margin-top: 2%;
background-color: white;
z-index: 5;
position: relative;
}

这是我的HTML：

<body>
<div id="header"> 
<div id="navigation">
    <a id="link-home" href="#home">   home  </a>
    <a id="link-portfolio" href="#portfolio">   portfolio   </a>
    <a id="link-contact" href="#contact">   contact   </a>
    <a id="link-cv" href="#cv">   cv  </a>
</div>
<h1> ---- :</h1> <h2>portfolio and work</h2> 
</div>

<div id="sleeve">

<div id="home"> 
    <div class="content"><p> home</p> </div>
</div>

<div id="portfolio" class="panel"> <p> portfolio </p> </div>
<div id="contact" class="panel"> <p> contact </p> </div>
<div id="cv" class="panel"> <p> cv </p> </div>
</div>

<div id="footer"> copyright ----- 2013 </div>
</body>

我会永远感激任何人的帮助！

Answer 1

从您设置的方式来看，您似乎正在尝试创建响应式旋转木马？如果是这种情况，你仍然需要一些JS来更新css，比如添加另一个类。目前没有什么可以转换的，因为你的css没有改变。

Answer 2

检查一下，它会帮助你理解，这是在Jquery中做出的，但是你可以找到另一个更难编码的解决方案（如果这不能解决你的问题，我可以提供帮助）。

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_trans_reverse

如果<a href="#pagetwo" data-transition="slide">它将滑动到ID为＃34; divtwo＆＃34;

的div

如果<a href="#pageone" data-transition="slide" data-direction="reverse">它将执行反向数据方向，并将使用＆＃34; pageone＆＃34;返回到div。并将以相反的方式滑动。

希望这有帮助。

页面转换（滑入）不适用于CSS3

2 个答案: