累计动画与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。

也许这是一个选择器问题，或儿童/兄弟姐妹，或者我不能在同一个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>