天中人才市场 发表于 2013-9-28 18:07:01

HTM5特效CSS

HTM5效果CSS。放在网站CSS中



无用的自己删除。根据自己站点CSS定义


@keyframes pop{
0%{opacity:0;transform:scale(0.2);-ms-transform:scale(0.2);}
60%{opacity:0.75;transform:scale(1.1);-ms-transform:scale(1.1);}
100%{opacity:1;transform:scale(1);-ms-transform:scale(1);}
}
@-moz-keyframes pop{
0%{opacity:0;-moz-transform:scale(0.2);}
60%{opacity:0.75;-moz-transform:scale(1.1);}
100%{opacity:1;-moz-transform:scale(1);}
}
@-webkit-keyframes pop{
0%{opacity:0;-webkit-transform:scale(0.2);}
60%{opacity:0.75;-webkit-transform:scale(1.1);}
100%{opacity:1;-webkit-transform:scale(1);}
}
@-o-keyframes pop{
0%{opacity:0;-o-transform:scale(0.2);}
60%{opacity:0.75;-o-transform:scale(1.1);}
100%{opacity:1;-o-transform:scale(1);}
}
@keyframes fastr{
0%{opacity:0;transform:translate(0,60px);}
100%{opacity:1;transform:translate(0,0);}
}
@-webkit-keyframes fastr{
0%{opacity:0;-webkit-transform:translate(0,60px);}
100%{opacity:1;-webkit-transform:translate(0,0);}
}
@-moz-keyframes fastr{
0%{opacity:0;-moz-transform:translate(0,60px);}
100%{opacity:1;-moz-transform:translate(0,0);}
}
@-o-keyframes fastr{
0%{opacity:0;-o-transform:translate(0,60px);}
100%{opacity:1;-o-transform:translate(0,0);}
}
@keyframes afastr{
0%{opacity:0;transform:translate(0,-60px);}
67%{opacity:1;transform:translate(0,0);}
86%{opacity:1;transform:translate(0,-2px);}
100%{opacity:1;transform:translate(0,0);}
}
@-webkit-keyframes afastr{
0%{opacity:0;-webkit-transform:translate(0,-60px);}
67%{opacity:1;-webkit-transform:translate(0,0);}
86%{opacity:1;-webkit-transform:translate(0,-2px);}
100%{opacity:1;-webkit-transform:translate(0,0);}
}
@-moz-keyframes afastr{
0%{opacity:0;-moz-transform:translate(0,-60px);}
67%{opacity:1;-moz-transform:translate(0,0);}
86%{opacity:1;-moz-transform:translate(0,-2px);}
100%{opacity:1;-moz-transform:translate(0,0);}
}
@-o-keyframes afastr{
0%{opacity:0;-o-transform:translate(0,-60px);}
67%{opacity:1;-o-transform:translate(0,0);}
86%{opacity:1;-o-transform:translate(0,-2px);}
100%{opacity:1;-o-transform:translate(0,0);}
}
.fwinmask{animation-duration:0.4s;-webkit-animation-duration:0.4s;animation-name:pop;-webkit-animation-name:pop;}
.p_pop{animation-duration:0.2s;-webkit-animation-duration:0.2s;animation-name:afastr;-webkit-animation-name:afastr;}
.fastpreview{animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-name:afastr;-webkit-animation-name:afastr;}
.pct{animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-name:fastr;-webkit-animation-name:fastr;}
#hd h2{animation-duration:0.4s;-webkit-animation-duration:0.4s;animation-name:afastr;-webkit-animation-name:afastr;}
#um,#toptb,.pns{animation-duration:1s;-webkit-animation-duration:1s;animation-name:afastr;-webkit-animation-name:afastr;}
#hd h2{transition:all .15s ease-out;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;-o-transition:all .15s ease-out;}
#hd h2:hover{transform:scale(1.07) rotate(-1deg);-webkit-transform:scale(1.07) rotate(-1deg);-moz-transform:scale(1.07) rotate(-1deg);-o-transform:scale(1.07) rotate(-1deg);}
.avt{transition:all .15s ease-out;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;-o-transition:all .15s ease-out;}
.avt:hover{transform:scale(1.07);-webkit-transform:scale(1.07);-moz-transform:scale(1.07);-o-transform:scale(1.07);}
#scbar_txt{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-o-transition:all 0.25s ease;}
#scbar_txt:hover{width:450px;text-shadow:#585858 0px 0px 3px;}
#scbar_txt:focus{width:450px;}
#ls_username,#ls_password{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-o-transition:all 0.25s ease;}
#ls_username:focus,#ls_password:focus{transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);}
a{transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;}
a:hover,a:visited:hover{text-shadow:#585858 0px 0px 3px;}


阿念 发表于 2013-9-29 00:44:03

好东西！飞鱼辛苦了！

绿叶 发表于 2013-9-29 17:26:15

看看是啥东东

79hc 发表于 2013-10-1 16:26:35

根据自己站点CSS定义

根据自己站点CSS定义

2312373360 发表于 2013-10-1 23:31:24

什么东东

xinlianxin89 发表于 2013-10-4 10:02:05

看看县

valley 发表于 2013-10-8 10:59:18

看看先，这家伙老出新玩意

alonedrunk 发表于 2013-10-8 14:51:57

看看。

zmmqfm 发表于 2013-10-12 13:14:22

看看先

xiaotaotao 发表于 2013-10-12 15:48:19

新东西不错
页: [1] 2 3 4
查看完整版本: HTM5特效CSS