h2的动画效果一直做不出来 有哪位大神能提供一下代码吗 谢谢
h2的动画效果一直做不出来 有哪位大神能提供一下代码吗 谢谢
6 回答
#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;
}
}
#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 ;
}
}
举报
0/150
提交
取消
