繁體
|
簡體
Sclub交友聊天~加入聊天室當版主
(檢舉)
分享
新浪微博
QQ空间
人人网
腾讯微博
Facebook
Google+
Plurk
Twitter
Line
標題:
[分享]
【代码分享】让自己的论坛动起来!
[打印本頁]
作者:
lmod论坛
時間:
2014-1-12 21:43
標題:
【代码分享】让自己的论坛动起来!
本帖最後由 lmod论坛 於 2014-1-12 21:46 編輯
这个代码是我从DZ官方那找的!此代码支持所有系列!
<style>
@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;}</style>
複製代碼
作者:
章鱼
時間:
2014-1-12 22:05
好像之前已经有人发过了,不过还是感谢分享
作者:
lmod论坛
時間:
2014-1-12 22:11
呵呵,可以根据这个代码拓展更多的功能!
回復
2#
章鱼
作者:
章鱼
時間:
2014-1-12 22:13
回復
3#
lmod论坛
对,他这种用CSS3做动画的思路非常好用
作者:
lmod论坛
時間:
2014-1-12 22:17
配合上你的首页搜索框代码特别酷!
回復
4#
章鱼
作者:
superman1024
時間:
2014-1-12 22:21
感謝分享,感恩唷
作者:
Yenifer
時間:
2014-1-12 22:30
看看是什么?
歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://six168.com/discuz/)
Powered by Discuz! 7.2