我試圖做出一種動畫網站只有使用CSS動畫與:target
選擇累計動畫與CSS
我提出了我的第一個梯級,然後遇到的主要問題:
我無法再生成動畫了。也許是因爲我不確定我使用的代碼的每一行,這就是爲什麼我要來找你。
基本上效果實際上是只有第二個鏈接上工作。
這裏是一小塊我的代碼:
.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
上使用兩個動畫。
但當然有一個解決方案,你可以給我帶來。
你好,謝謝你的回答。 我看得更清楚但有些令人不安。 #s1:我正在使用的目標是正常工作。我認爲這是指「href =#s1」,而不是「id = s1」 似乎是在做出錯誤的句子。 我現在試試你的願景 –
在CSS中它指的是id。因此,如果您編寫類似'#s1:target {background:blue;}'的東西,它會顯示爲:選擇具有標識符s1'的元素,如果它獲得目標(如果鏈接爲'href =「#s1」 '被點擊)使其成爲背景藍色。 – vellip
所以我試着給id導航中的鏈接。它不工作。 我給我的導航id's1',也許我不應該,但不幸的是只有一個鏈接工作是這樣的:D 我想我應該重新組織我的HTML,但即使有一些我失蹤了:目標完整句子。我用:#move#s1:target〜.square。爲了做出迴應,在移動父母的目標的兄弟姐妹。沒有什麼不同的'呼叫'的ID。 (比如>對於父...) –