2017-08-30 67 views
0

我試圖做出一種動畫網站只有使用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上使用兩個動畫。

但當然有一個解決方案,你可以給我帶來。

回答

0

: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規則,要麼想像下面那樣使用類。

+0

你好,謝謝你的回答。 我看得更清楚但有些令人不安。 #s1:我正在使用的目標是正常工作。我認爲這是指「href =#s1」,而不是「id = s1」 似乎是在做出錯誤的句子。 我現在試試你的願景 –

+0

在CSS中它指的是id。因此,如果您編寫類似'#s1:target {background:blue;}'的東西,它會顯示爲:選擇具有標識符s1'的元素,如果它獲得目標(如果鏈接爲'href =「#s1」 '被點擊)使其成爲背景藍色。 – vellip

+0

所以我試着給id導航中的鏈接。它不工作。 我給我的導航id's1',也許我不應該,但不幸的是只有一個鏈接工作是這樣的:D 我想我應該重新組織我的HTML,但即使有一些我失蹤了:目標完整句子。我用:#move#s1:target〜.square。爲了做出迴應,在移動父母的目標的兄弟姐妹。沒有什麼不同的'呼叫'的ID。 (比如>對於父...) –

0

可以測試嗎?

<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> 
+0

你好,謝謝你的回答,它的真實我沒有關閉div,在我的例子中,錯誤是因爲有很多其他div進入#move中,以便與':target〜'創建一些兄弟連接。 也許還有其他的方法可以在一些句子中將'鏈接'和'一個移動'聯繫起來 –