3

所以我试图在网页上创建一个动画，并试图找出一种使用 CSS3 的方法，但我对如何做到这一点感到很困惑。

我需要发生的是当用户单击链接元素时，我希望 div 展开并填充特定于单击的链接元素的内容。例如，当用户单击标题为“About”的链接时，链接元素下方的 div 将展开并显示一些内容。然后，当他们单击另一个链接时，说“联系”，特定于“关于”的内容将消失，特定于“联系”的内容将显示为 div 重新调整大小以适应新内容。

我想我可以用 Javascript 很容易地做到这一点，但是有人可以告诉我用 CSS3 是否更容易做到/可能吗？

谢谢大家。

4

4 回答 4

1

你需要的是一些判断来为你正在开发的任何东西增添趣味......如果没有错，你想要这样的东西：CSS3 vs Jquery

获取 jquery 库并在您的页面中引用它。这是一个让您快速入门的片段。

 <a id="home" href="home.html">Home</a> 
<a id="about" href="about.html">About</a> 
<div id="home_div"></div>
<div id="about_div"></div>
    <script type="text/javascript">
        $('#home').click(function () {
            $('html').animate({ scrollTop: 500 }, 1000);
            $('#home_div').animate().show('slow');
            $('#about_div').animate().fadeOut('slow');

            return false;
        });
       $('#about').click(function () {
            $('html').animate({ scrollTop: 500 }, 1000);
            $('#home_div').animate().fadeOut('slow');
            $('#about_div').animate().show('slow');

            return false;
        });
    </script>

您可以将效果更改为其他可用的效果。

于 2012-11-09T01:49:37.360 回答
1

如前所述，JavaScript 是您最好的朋友。但既然你问是否可以使用 CSS3，我不得不试一试。基本上我所做的是使用目标选择器来触发动画。因此，当您单击一个链接时，一个 div 会扩展一些内容，如果您单击另一个链接，一个新的 div 会扩展，其中一些新内容（位于同一位置）会扩展，从而产生相同 div 扩展的错觉。

这不是一个最佳解决方案，我很快就完成了这个例子，所以它并没有完全按照你的意愿工作，但它至少为你提供了一个关于如何仅使用 CSS 完成它的图片。

希望有帮助！

这是一个演示，这是我的示例中的代码：

HTML

<a href="#box">Box</a><br /><a href="#boxtwo">Box two</a>
<div id="box">Hello</div>
<div id="boxtwo">Hello again,</div>

CSS

#box, #boxtwo{
    position: absolute;
    top: 50px;
    left: 50px;    
    width: 0px;
    height: 0px;
    background-color: #e3e3e3;
    color: transparent;    
}

#box:target {
      -webkit-animation: expand 1.0s ease-in forwards;
}

#boxtwo:target {
      -webkit-animation: expand 1.0s ease-in forwards;
}

@-webkit-keyframes expand {
      0%   {width: 0px; height: 0px; color: transaprent;}
      50%  {width: 100px; height: 100px; color: transparent;}
      100% {width: 100px; height: 100px; color: #000000;}
}
于 2012-11-09T07:14:32.743 回答
1

单击触发动画的最简单方法是在单击时向对象添加 CSS 类，并为具有该类的任何对象配置 CSS3 过渡或动画。

然后，您隐藏该项目的第二个类可以从同一对象中删除该类名。

动画/过渡的所有细节都将在 CSS3 样式规则中指定。只有类名的添加/删除将使用 javascript 完成。

CSS3 本身可以使用:hover伪选择器触发动画/过渡，但功能并没有比这更强大，也不能触发基于点击的动画。

于 2012-11-09T01:38:47.480 回答
1

我不认为这是一个 CSS3 与 JavaScript 的问题。即使您使用 CSS3 制作动画，您也可能需要 JavaScript 来根据点击事件触发动画。

根据您需要做的事情，我看到了几个主要选项：

  1. 正如@jfriend00 所说，添加或删除执行动画的 CSS 类。
  2. 使用 jQuery 的show、hide、fadeIn、fadeOut和animate API。
于 2012-11-09T01:43:07.857 回答