使用CSS

Question

我正在尝试使用 CSS动画与:target选择器

制作一种动画网站

我编造了我的第一个级联，然后遇到了主要问题：

我不能动画了。也许是因为我不确定我使用的每一行代码，这就是我要来找你的原因。

  

效果基本上只在第二个链接上正常。

这是我的一小段代码：

.saq {
  width: 110px;
  height: 110px;
  color: yellow;
  margin-left: 815px;
  border: 1px black solid;
  margin-top: -550px;
  transition: 4s ease-in-out;
  position: absolute
}

.qaq {
  width: 60px;
  height: 110px;
  margin-left: 1205px;
  margin-top: -550px;
  transition: 5s ease-in-out;
  position: absolute;
  display: inline;
  cursor: auto;
  background-color: black;
  z-index: 1000
}

a {
  font-size: 100px;
  text-align: right
}

;
.navi {
  margin-left: 400px;
  transform: translate(300px, 200px);
}

nav a {
  background-color: yellow;
  display: inline-block
}

nav a:hover {
  background-color: brown;
  color: yellow;
}

#s1:target {
  display: block;
  transition: all 4s ease;
  transform: translate(300px, 350px) rotate(90deg) scale(0.6);
  overflow: hidden;
  overflow-y: hidden
}

#move #s1:target~.saq {
  transform: translateY(-1720px)
}

#move #s1:target~.qaq {
  transform: translateY(-1720px)
}

<div id=move>
  <nav class=navi id=s1>
    <ul><a href="#s2">Home</a></ul>
    <ul><a href="#s1">Creations</a></ul>
    <ul><a href="#s3">About</a></ul>
    <ul><a href="#">Contact</a></ul>

  </nav>


  <div class="qaq"></div>
  <div class="saq"></div>

以下是该页面的链接：http://faxe-kondi.16mb.com/bru.html

到目前为止，我所做的是在#s1成为目标之后移动了很多div。

我想要做的事情：在#s3成为目标之后进行大量的移动。

也许这是一个选择器问题，或者是孩子/兄弟，或者我可能无法在同一div上使用两个动画。

但当然有一个解决方案可以带给我。

Answer 1

:target选择器在您的代码中正常工作。但您只能将其用于#s1:target规则。 HTML中的哪一个只是第二个链接。

例如：

.links>a {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.link1 {
  background: red;
}

.link2 {
  background: blue;
}

.link3 {
  background: green;
}

.animated-box {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  transition: border-radius 1s;
}

.animated-box:target {
  border-radius: 0;
}

#box1 {
  background: red;
}

#box2 {
  background: blue;
}

#box3 {
  background: green;
}

<div class="links">
  <a class="link1" href="#box1"></a>
  <a class="link2" href="#box2"></a>
  <a class="link3" href="#box3"></a>
</div>

<div class="animated-box" id="box1"></div>
<div class="animated-box" id="box2"></div>
<div class="animated-box" id="box3"></div>

请参阅，此处的区别在于您应用转换效果（border-radius: 0）的方式。如果您只想定位一个元素，可以选择#s1:target之类的选择器，但只有id="s1"的元素获得目标（意味着href="#s1"链接时才会发生这种情况被点击了。）

您要么像使用#s1:target那样指定更多的CSS规则，要么就像我在下面所做的那样使用类。

Answer 2

你能测试吗？

<div id=move>
    <nav class=navi id=s1>
        <ul><a href="#s1">Home</a></ul>
        <ul><a href="#s1">Creations</a></ul>
        <ul><a href="#s1">About</a></ul>
        <ul><a href="#s1">Contact</a></ul>
    </nav>
    <div class="qaq"></div>
    <div class="saq"></div>
 </div>