課程
/前端開發(fā)
/CSS3
/css3實現(xiàn)網(wǎng)頁平滑過渡效果
關(guān)于animation作用域的問題
2015-09-14
源自:css3實現(xiàn)網(wǎng)頁平滑過渡效果 2-7
正在回答
比如html的所有標(biāo)簽:塊級啊行級啊或者inline-block啊都可以看做是一個盒模型,也就是可以加border設(shè)置margin和padding這些;
但是有些效果不是全局屬性,只能加在塊標(biāo)簽或者行標(biāo)簽上;
這兩個東西要區(qū)分開。
不然會栽坑栽的親媽都認不出來,別問我怎么知道的
各位請注意:
animation只能作用于div標(biāo)簽和類div標(biāo)簽————類div標(biāo)簽指的是和div一樣的塊級標(biāo)簽,就像老師case中的h2標(biāo)簽和p標(biāo)簽,像是img這種inline-block即行-塊標(biāo)簽,以及行標(biāo)簽是不起作用的,如果要想在inline級標(biāo)簽上加animation動畫效果,需要先給元素設(shè)置上div包裹起來,然后把animation屬性設(shè)置到該div的id上。
我是照著老師的模板做的個人簡歷,section里裝著一個img和一個ul,這倆都不是塊級標(biāo)簽,所以我一開始想要給img加moveDown動畫的時候總是加不進去,我反復(fù)查看了單詞有沒有拼錯這種低級錯誤,查看了選擇器的匹配到底正確不正確,查看了是不是瀏覽器問題,最終都排除掉了,我想那就只能剩下animation的作用域問題了;
然后就到w3c上查看了animation屬性,果然只能作用于div標(biāo)簽,也就是說animation并不是一個全局屬性,然后我就在我自己的代碼上給img加上了一個div(我的img是position:absolute,所以加上了div后對img的位置毫無影響,大家做改動的時候要考慮標(biāo)簽position設(shè)置的影響),問題就解決了。
舉報
CSS3 打造頁面之間的平滑過渡效果,帶來神奇的體驗
1 回答st-scroll不就一個么,為什么一定要指定是“#st-control-:checked ~ .st-scroll #st-panel-5"?
1 回答#st-control-2:checked ~.st-sctoll #st-panel-1 h2{ }選擇不生效
2 回答st-scroll,st-panel不能到頁面最頂部的問題
6 回答我發(fā)現(xiàn)?#st-control-1:checked ~ .st-scroll不能選擇到 .st-scroll怎么破?
1 回答st-panel位置
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2015-09-14
比如html的所有標(biāo)簽:塊級啊行級啊或者inline-block啊都可以看做是一個盒模型,也就是可以加border設(shè)置margin和padding這些;
但是有些效果不是全局屬性,只能加在塊標(biāo)簽或者行標(biāo)簽上;
這兩個東西要區(qū)分開。
不然會栽坑栽的親媽都認不出來,別問我怎么知道的
2015-09-14
各位請注意:
animation只能作用于div標(biāo)簽和類div標(biāo)簽————類div標(biāo)簽指的是和div一樣的塊級標(biāo)簽,就像老師case中的h2標(biāo)簽和p標(biāo)簽,像是img這種inline-block即行-塊標(biāo)簽,以及行標(biāo)簽是不起作用的,如果要想在inline級標(biāo)簽上加animation動畫效果,需要先給元素設(shè)置上div包裹起來,然后把animation屬性設(shè)置到該div的id上。
我是照著老師的模板做的個人簡歷,section里裝著一個img和一個ul,這倆都不是塊級標(biāo)簽,所以我一開始想要給img加moveDown動畫的時候總是加不進去,我反復(fù)查看了單詞有沒有拼錯這種低級錯誤,查看了選擇器的匹配到底正確不正確,查看了是不是瀏覽器問題,最終都排除掉了,我想那就只能剩下animation的作用域問題了;
然后就到w3c上查看了animation屬性,果然只能作用于div標(biāo)簽,也就是說animation并不是一個全局屬性,然后我就在我自己的代碼上給img加上了一個div(我的img是position:absolute,所以加上了div后對img的位置毫無影響,大家做改動的時候要考慮標(biāo)簽position設(shè)置的影響),問題就解決了。