                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /css3实现网页平滑过渡效果

h2为什么按照这个代码写完，没有效果

h2为什么按照这个代码写完，没有效果

明哥就是神

2015-08-13

源自：css3实现网页平滑过渡效果 2-7

关注问题我要回答

1320

操作

收起

7 回答

饭粒宝宝
2016-10-21

@符号后面写成-webkit-,-moz-,-ms-之后，大括号里面的也应该写成一样的，你的全是-webkit-

0 回复有任何疑惑可以回复我~

饭粒宝宝
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;

}

}

0 回复有任何疑惑可以回复我~

爱从零开始0
2016-08-30

我也是，代码没有问题，就是不出效果！！！急！！

0 回复有任何疑惑可以回复我~

qq_云破月来_03319603
2016-06-30

怎么换？

0 回复有任何疑惑可以回复我~

菜鼻子尖
2015-11-22

错了，可能是是浏览器的地址不是index.html,而是重载时的index.html#st-panel-2什么的，换成index.html就好了

0 回复有任何疑惑可以回复我~

菜鼻子尖
2015-11-22

先选最后一个页面，其他页面才会有效果，汗一个

0 回复有任何疑惑可以回复我~

明哥就是神提问者
2015-08-13

#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;}}

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

css3实现网页平滑过渡效果

参与学习 54370 人
解答问题 372 个

CSS3 打造页面之间的平滑过渡效果，带来神奇的体验

本课相似问答

4 回答为什么我完全按照这个写的三角形上面却没有显示任何图标呢

3 回答为什么按照老师写的代码，顶部的三角和三角里面的图颜色变了，H2 和P没有变颜色呢

2 回答h2设置的top:50%怎么没效果

1 回答h2 效果出不来

1 回答Moz没h2 p标签的碰撞效果啊，求解

搜索更多本课相关问答

h2为什么按照这个代码写完，没有效果

我要回答关注问题

意见反馈帮助中心 APP下载