課程
/前端開發(fā)
/CSS3
/css3實現(xiàn)網(wǎng)頁平滑過渡效果
h2為什么按照這個代碼寫完,沒有效果
2015-08-13
源自:css3實現(xiàn)網(wǎng)頁平滑過渡效果 2-7
正在回答
@符號后面寫成-webkit-,-moz-,-ms-之后,大括號里面的也應(yīng)該寫成一樣的,你的全是-webkit-
#st-contrl-1:checked~.st-scroll #st-panel-1 h2,
#st-contrl-2:checked~.st-scroll #st-panel-2 h2,
#st-contrl-3:checked~.st-scroll #st-panel-3 h2,
#st-contrl-4:checked~.st-scroll #st-panel-4 h2,
#st-contrl-5:checked~.st-scroll #st-panel-5 h2{
? ? -webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;
? ? -o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
? ? -ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
? ? -moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;
? ? animation:moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity:0;
100%{
-webkit-transform:translateY(0px);
opacity:1;
@-ms-keyframes moveDown{
-ms-transform:translateY(-40px);
-ms-transform:translateY(0px);
@-o-keyframes moveDown{
-o-transform:translateY(-40px);
-o-transform:translateY(0px);
@-moz-keyframes moveDown{
-moz-transform:translateY(-40px);
-moz-transform:translateY(0px);
@keyframes moveDown{
transform:translateY(-40px);
transform:translateY(0px);
我也是,代碼沒有問題,就是不出效果?。?!急!!
怎么換?
錯了,可能是是瀏覽器的地址不是index.html,而是重載時的index.html#st-panel-2什么的,換成index.html就好了
先選最后一個頁面,其他頁面才會有效果,汗一個
#st-control-1:checked?~?.st-scroll?#st-panel-1?h2, #st-control-2:checked?~?.st-scroll?#st-panel-2?h2, #st-control-3:checked?~?.st-scroll?#st-panel-3?h2, #st-control-4:checked?~?.st-scroll?#st-panel-4?h2, #st-control-5:checked?~?.st-scroll?#st-panel-5?h2{? -webkit-animation:moveDown?0.6s?ease-in-out?0.2s?backwards; -moz-animation:moveDown?0.6s?ease-in-out?0.2s?backwards; -o-animation:moveDown?0.6s?ease-in-out?0.2s?backwards; -ms-animation:moveDown?0.6s?ease-in-out?0.2s?backwards; animation:moveDown?0.6s?ease-in-out?0.2s?backwards;} @-webkit-keyframes?moveDown{0%{?-webkit-transform:translateY(-40px);?opacity:0;}100%{?-webkit-transform:translateY(0);?opacity:1;}} @-moz-keyframes?moveDown{0%{?-webkit-transform:translateY(-40px);?opacity:0;}100%{?-webkit-transform:translateY(0);?opacity:1;}} @-o-keyframes?moveDown{0%{?-webkit-transform:translateY(-40px);?opacity:0;}100%{?-webkit-transform:translateY(0);?opacity:1;}} @-ms-keyframes?moveDown{0%{?-webkit-transform:translateY(-40px);?opacity:0;}100%{?-webkit-transform:translateY(0);?opacity:1;}} @keyframes?moveDown{0%{?-webkit-transform:translateY(-40px);?opacity:0;}100%{?-webkit-transform:translateY(0);?opacity:1;}}
舉報
CSS3 打造頁面之間的平滑過渡效果,帶來神奇的體驗
4 回答為什么我完全按照這個寫的三角形上面卻沒有顯示任何圖標(biāo)呢
3 回答為什么按照老師寫的代碼,頂部的三角和三角里面的圖顏色變了,H2 和P沒有變顏色呢
2 回答h2設(shè)置的top:50%怎么沒效果
1 回答h2 效果出不來
1 回答Moz沒h2 p標(biāo)簽的碰撞效果啊,求解
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)微信公眾號
2016-10-21
@符號后面寫成-webkit-,-moz-,-ms-之后,大括號里面的也應(yīng)該寫成一樣的,你的全是-webkit-
2016-10-21
#st-contrl-1:checked~.st-scroll #st-panel-1 h2,
#st-contrl-2:checked~.st-scroll #st-panel-2 h2,
#st-contrl-3:checked~.st-scroll #st-panel-3 h2,
#st-contrl-4:checked~.st-scroll #st-panel-4 h2,
#st-contrl-5:checked~.st-scroll #st-panel-5 h2{
? ? -webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;
? ? -o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
? ? -ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
? ? -moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;
? ? animation:moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity:0;
}
100%{
-webkit-transform:translateY(0px);
opacity:1;
}
}
@-ms-keyframes moveDown{
0%{
-ms-transform:translateY(-40px);
opacity:0;
}
100%{
-ms-transform:translateY(0px);
opacity:1;
}
}
@-o-keyframes moveDown{
0%{
-o-transform:translateY(-40px);
opacity:0;
}
100%{
-o-transform:translateY(0px);
opacity:1;
}
}
@-moz-keyframes moveDown{
0%{
-moz-transform:translateY(-40px);
opacity:0;
}
100%{
-moz-transform:translateY(0px);
opacity:1;
}
}
@keyframes moveDown{
0%{
transform:translateY(-40px);
opacity:0;
}
100%{
transform:translateY(0px);
opacity:1;
}
}
2016-08-30
我也是,代碼沒有問題,就是不出效果?。?!急!!
2016-06-30
怎么換?
2015-11-22
錯了,可能是是瀏覽器的地址不是index.html,而是重載時的index.html#st-panel-2什么的,換成index.html就好了
2015-11-22
先選最后一個頁面,其他頁面才會有效果,汗一個
2015-08-13