Fatal编程技术网
  • html/
  • Html CSS页面转换和动画

Html CSS页面转换和动画

html css

Html CSS页面转换和动画,html,css,transitions,Html,Css,Transitions,我正在为一个朋友开发一个投资组合网站。基本情况如下所示： 我的问题是： 我如何在“菜单”和“工作（或）”之间进行转换 没有“头版”闪过？在过渡到工作或关于工作时，有没有办法隐藏头版 还有,；我怎样才能让“左右”和“工作”从 右，而不是左（？） 您有一个输入与输出相同的转换。因此，当您选择一个新项目时，您的初始菜单会在新项目出现之前移回。结果是，您会立即看到下面的页面 您可以向CSS过渡添加属性、持续时间和缓和。如果你有一个菜单返回的过渡延迟，它将等待一个出来的位置，然后再动画出来。事实上，一

我正在为一个朋友开发一个投资组合网站。基本情况如下所示：

我的问题是：

  • 我如何在“菜单”和“工作（或）”之间进行转换 没有“头版”闪过？在过渡到工作或关于工作时，有没有办法隐藏头版
  • 还有,；我怎样才能让“左右”和“工作”从 右，而不是左（？）
      • 您有一个输入与输出相同的转换。因此，当您选择一个新项目时，您的初始菜单会在新项目出现之前移回。结果是，您会立即看到下面的页面

      您可以向CSS过渡添加属性、持续时间和缓和。如果你有一个菜单返回的过渡延迟，它将等待一个出来的位置，然后再动画出来。事实上，一旦导航菜单隐藏在新菜单后面，您可能根本不需要对其设置动画，您可以立即将其移回，这取决于您的转换正在执行的操作

      <style type="text/css">
body {
    margin: 0;
    background: #f2f2f2;
    color: #000;
}
#content {
    clear: both;
    margin: 120px;
}
#menu-nav {
    float: left;
    width: 50%;
}
#menu {
    width: 100%;
    min-height: 100%;
    position: absolute;
    margin-left: -102%;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: margin-left .4s ease-in-out .4s;
    -moz-transition: margin-left .4s ease-in-out .4s;
    -o-transition: margin-left .4s ease-in-out .4s;
    -ms-transition: margin-left .4s ease-in-out .4s;
    transition: margin-left .4s ease-in-out .4s;
    background: red;
}
#menu:target {
    width: 100%;
    height: 100%;
    color: #fff;
    overflow: hidden;
    margin-left: 0;
    z-index: 2;
    -webkit-transition: margin-left .4s ease-in-out;
    -moz-transition: margin-left .4s ease-in-out;
    -o-transition: margin-left .4s ease-in-out;
    -ms-transition: margin-left .4s ease-in-out;
    transition: margin-left .4s ease-in-out;
    background: orange;
}
#work, #about {
    width: 100%;
    min-height: 100%;
    position: absolute;
    margin-left: -102%;
    top: 0px;
    left: 0px;
    z-index: 1;
    -webkit-transition: margin-left .4s ease-in-out .4s;
    -moz-transition: margin-left .4s ease-in-out .4s;
    -o-transition: margin-left .4s ease-in-out .4s;
    -ms-transition: margin-left .4s ease-in-out .4s;
    transition: margin-left .4s ease-in-out .4s;
    background: green;
}
#work:target, #about:target {
    width: 100%;
    height: 100%;
    color: #000;
    overflow: hidden;
    margin-left: 0;
    z-index: 2;
    -webkit-transition: margin-left .4s ease-in-out;
    -moz-transition: margin-left .4s ease-in-out;
    -o-transition: margin-left .4s ease-in-out;
    -ms-transition: margin-left .4s ease-in-out;
    transition: margin-left .4s ease-in-out;
    background: lightblue;
}
#main-item, #menu-item {
    float: left;
    width: 50%;
}
</style>
<div id="content">
    <div id="main">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>Front Page</p>
        </div>
    </div>
    <div id="work">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>Work</p>
        </div>
        </div>
    </div>
    <div id="about">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>About</p>
        </div>
        </div>
    </div>
    <div id="menu">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#home"><div id="menu-back">MENU
            </div></a>
        </div>
        <div id="menu-item">
            <p><a class="link" href="#work">work</a></p>
            <p><a class="link" href="#about">about</a></p>
        </div>
        </div>
    </div>
</div>

      
身体{
保证金：0；
背景#f2f2；
颜色：#000；
}
#内容{
明确：两者皆有；
利润率：120像素；
}
#菜单导航{
浮动：左；
宽度：50%；
}
#菜单{
宽度：100%；
最小高度：100%；
位置：绝对位置；
左边缘：-102%；
排名：0；
左：0；
z指数：1；
-webkit过渡：左边距。4s易入易出。4s；
-moz过渡：左边距。4s缓进输出。4s；
-o型过渡：左边距。4s易进易出。4s；
-ms过渡：左边距。4s缓进快出。4s；
过渡：左边距。4s容易进出。4s；
背景：红色；
}
#菜单：目标{
宽度：100%；
身高：100%；
颜色：#fff；
溢出：隐藏；
左边距：0；
z指数：2；
-webkit过渡：左边距。4s易入易出；
-moz过渡：左边距。4s缓进缓出；
-o型过渡：左边距。4s缓进缓出；
-ms过渡：左边距。4s缓进缓出；
过渡：左边距。4s容易进出；
背景：橙色；
}
#工作，关于{
宽度：100%；
最小高度：100%；
位置：绝对位置；
左边缘：-102%；
顶部：0px；
左：0px；
z指数：1；
-webkit过渡：左边距。4s易入易出。4s；
-moz过渡：左边距。4s缓进输出。4s；
-o型过渡：左边距。4s易进易出。4s；
-ms过渡：左边距。4s缓进快出。4s；
过渡：左边距。4s容易进出。4s；
背景：绿色；
}
#工作：目标，#关于：目标{
宽度：100%；
身高：100%；
颜色：#000；
溢出：隐藏；
左边距：0；
z指数：2；
-webkit过渡：左边距。4s易入易出；
-moz过渡：左边距。4s缓进缓出；
-o型过渡：左边距。4s缓进缓出；
-ms过渡：左边距。4s缓进缓出；
过渡：左边距。4s容易进出；
背景：浅蓝色；
}
#主项，#菜单项{
浮动：左；
宽度：50%；
}
头版
      
工作
      
关于
      这里是您的代码稍微修改。在元素的原始版本和
      ：target
      版本上都有重复的转换。当元素成为目标时，转换会立即发生，但当它失去目标状态并恢复为常规元素时，转换会延迟，因此它会等待下一个目标就位，然后消失

      我还添加了一些
      z-index
      交换，以便目标始终位于常规元素之上。如果只在主定义上定义z索引，它也将级联到：目标

      最后，我在元素的不同状态下添加了一些明亮的背景色，以使您能够清楚地看到发生了什么

      最后一点注意：如果你给了
      #menu
      一个宽度，我不希望你也必须在
      #menu:target
      上定义它-尽管我把它留在了你的代码中，以防有其他原因。

      谢谢你！相信我，完成的设计会有更多的颜色。有没有关于如何从右侧而不是从左侧进行切换和工作的想法？而不是
      left:0和
      左边距：-102%使用正确的等价物？我想应该这样吧？试过了，没用。。。但是我确实清理了我的代码，现在一切都正常工作了。非常感谢你的帮助！

      body {
    margin: 0;
    background: #f2f2f2;
    color: #000;
}

#content {
    clear: both;
    margin: 120px;
}

#menu-nav {
    float: left;
    width: 50%;
}

#menu {
    width: 100%;
    min-height: 100%;
    position: absolute;
    margin-left: -102%;
    top: 0;
    left: 0;
    z-index:2;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

#menu:target {
    width: 100%;
    height: 100%;
    color: #fff;
    overflow: hidden;
    margin-left: 0;
    background: #ccc;
}

#work, #about {
    width: 100%;
    min-height: 100%;
    position: absolute;
    margin-left: -102%;
    top: 0px;
    left: 0px;
    z-index:2;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

#work:target, #about:target {
    width: 100%;
    height: 100%;
    color: #000;
    overflow: hidden;
    margin-left: 0;
    background: #f2f2f2;
}

#main-item, #menu-item {
    float: left;
    width: 50%;

}

      

      <style type="text/css">
body {
    margin: 0;
    background: #f2f2f2;
    color: #000;
}
#content {
    clear: both;
    margin: 120px;
}
#menu-nav {
    float: left;
    width: 50%;
}
#menu {
    width: 100%;
    min-height: 100%;
    position: absolute;
    margin-left: -102%;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: margin-left .4s ease-in-out .4s;
    -moz-transition: margin-left .4s ease-in-out .4s;
    -o-transition: margin-left .4s ease-in-out .4s;
    -ms-transition: margin-left .4s ease-in-out .4s;
    transition: margin-left .4s ease-in-out .4s;
    background: red;
}
#menu:target {
    width: 100%;
    height: 100%;
    color: #fff;
    overflow: hidden;
    margin-left: 0;
    z-index: 2;
    -webkit-transition: margin-left .4s ease-in-out;
    -moz-transition: margin-left .4s ease-in-out;
    -o-transition: margin-left .4s ease-in-out;
    -ms-transition: margin-left .4s ease-in-out;
    transition: margin-left .4s ease-in-out;
    background: orange;
}
#work, #about {
    width: 100%;
    min-height: 100%;
    position: absolute;
    margin-left: -102%;
    top: 0px;
    left: 0px;
    z-index: 1;
    -webkit-transition: margin-left .4s ease-in-out .4s;
    -moz-transition: margin-left .4s ease-in-out .4s;
    -o-transition: margin-left .4s ease-in-out .4s;
    -ms-transition: margin-left .4s ease-in-out .4s;
    transition: margin-left .4s ease-in-out .4s;
    background: green;
}
#work:target, #about:target {
    width: 100%;
    height: 100%;
    color: #000;
    overflow: hidden;
    margin-left: 0;
    z-index: 2;
    -webkit-transition: margin-left .4s ease-in-out;
    -moz-transition: margin-left .4s ease-in-out;
    -o-transition: margin-left .4s ease-in-out;
    -ms-transition: margin-left .4s ease-in-out;
    transition: margin-left .4s ease-in-out;
    background: lightblue;
}
#main-item, #menu-item {
    float: left;
    width: 50%;
}
</style>
<div id="content">
    <div id="main">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>Front Page</p>
        </div>
    </div>
    <div id="work">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>Work</p>
        </div>
        </div>
    </div>
    <div id="about">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#menu"><div id="menu-show">MENU
            </div></a>
        </div>
        <div id="main-item">
            <p>About</p>
        </div>
        </div>
    </div>
    <div id="menu">
        <div style="margin:120px;">
        <div id="menu-nav">
            <a href="#home"><div id="menu-back">MENU
            </div></a>
        </div>
        <div id="menu-item">
            <p><a class="link" href="#work">work</a></p>
            <p><a class="link" href="#about">about</a></p>
        </div>
        </div>
    </div>
</div>