我正在尝试使用CSS 动画 和:target
选择器
我做了我的第一个级联,然后遇到了主要问题:
我不能再做动画了。也许是因为我不确定我正在使用的每一行代码,这就是我来找你的原因。
Basically the effect is actually working on the 2nd link only.
这是我的一小段代码:
.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。
可能是选择器问题,或者 child / sibling ,或者我不能在同一个 div
上使用两个动画。
当然,你可以给我一个解决方案。
最佳答案
: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 规则,要么像我在下面所做的那样使用一个类。
关于html - 使用 CSS 累积动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45962791/