h2的動畫效果一直做不出來 有哪位大神能提供一下代碼嗎 謝謝
h2的動畫效果一直做不出來 有哪位大神能提供一下代碼嗎 謝謝
瞎貓小弟弟
2015-04-29
6 回答
舉報
0/150
提交
取消
2015-06-23
#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;
-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
animation:moveDown 0.6s ease-in-out 0.2s backwards;
text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
@-webkit-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity:0;
}
100%{
-webkit-transform:translateY(0px);
opacity: 1;
}
}
@-moz-keyframes moveDown{
0%{
-moz-transform:translateY(-40px);
opacity:0;
}
100%{
-moz-transform:translateY(0px);
opacity: 1;
}
}
@-ms-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity:0;
}
100%{
-webkit-transform:translateY(0px);
opacity: 1;
}
}
@-o-keyframes moveDown{
0%{
-o-transform:translateY(-40px);
opacity:0;
}
100%{
-o-transform:translateY(0px);
opacity: 1;
}
}
@keyframes moveDown{
0%{
transform:translateY(-40px);
opacity:0;
}
100%{
transform:translateY(0px);
opacity: 1;
}
}
.st-panel p{
position:absolute;
width:90%;
left:5%;
top:50%;
font-size:16px;
padding: 0;
text-align: center;
-webkit-backface-visibility:hidden;
color:#8b8b8b;
margin-top: 10px;
}
#st-control-1:checked ~.st-scroll #st-panel-1 p,
#st-control-2:checked ~.st-scroll #st-panel-2 p,
#st-control-3:checked ~.st-scroll #st-panel-3 p,
#st-control-4:checked ~.st-scroll #st-panel-4 p,
#st-control-5:checked ~.st-scroll #st-panel-5 p{
-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-o-animation:moveUp 0.6s ease-in-out 0.2s backwards;
animation:moveUp 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveUp{
0%{
-webkit-transform:translateY(40px);
opacity:0;
}
100%{
-webkit-transform:translateY(0px);
opacity: 1;
}
}
@-moz-keyframes moveUp{
0%{
-moz-transform:translateY(40px);
opacity:0;
}
100%{
-moz-transform:translateY(0px);
opacity: 1;
}
}
@-ms-keyframes moveUp{
0%{
-ms-transform:translateY(40px);
opacity:0;
}
100%{
-ms-transform:translateY(0px);
opacity: 1;
}
}
@-o-keyframes moveUp{
0%{
-o-transform:translateY(40px);
opacity:0;
}
100%{
-o-transform:translateY(0px);
opacity: 1;
}
}
@keyframes moveUp{
0%{
transform:translateY(40px);
opacity:0;
}
100%{
transform:translateY(0px);
opacity: 1;
}
}
2016-06-30
去掉backwards后動畫就出來了
2015-09-14
頁面滑動效果就是卡了好久才發(fā)現(xiàn)bug的
這個效果又卡住了。。。。這次都不知道什么問題。。。
已瘋
2015-05-12
#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:moveDo?1s?ease-in-out?0.5s?backwards; ????-moz-animation:moveDo?1s?ease-in-out?0.5s?backwards; ????-ms-animation:moveDo?1s?ease-in-out?0.5s?backwards; ????-o-animation:moveDo?1s?ease-in-out?0.5s?backwards; ????animation:moveDo?1s?ease-in-out?0.5s?backwards; } @-webkit-keyframes?moveDo{ ????0%{ ????????-webkit-transform:?translateY(-40px); ????????opacity:0?; ????} ????100%{ ????????-webkit-transform:translateY(0px); ????????opacity:1?; ????} }2015-05-12
肯定是單詞寫錯了，仔細看看。
2015-05-06
我也是一樣的，同求