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