CSS3 与 JavaScript

Question

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

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

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

谢谢大家。

Answer 1

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

这不是一个最佳解决方案，我把这个例子做得非常快，所以它并没有完全按照你想要的方式工作，但它至少让你了解了如何只用 CSS 来完成它。

希望对您有所帮助!

这是一个 demo这是我示例中的代码:

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;}
}