免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

[分享] 分享一个让帖内投像360度旋转的代码

  1. <style>
  2. #viewthread .avatar img{
  3. width:100px;
  4. height:100px;
  5. transition:width 2s, height 2s;
  6. -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
  7. -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
  8. -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
  9. }

  10. #viewthread .avatar img:hover
  11. {
  12. width:100px;
  13. height:100px;
  14. transform:rotate(180deg);
  15. -moz-transform:rotate(360deg); /* Firefox 4 */
  16. -webkit-transform:rotate(360deg); /* Safari and Chrome */
  17. -o-transform:rotate(360deg); /* Opera */
  18. }
  19. </style>
複製代碼
头部或者第三方

感谢分享

TOP

用户组头的话,可以直接兩個刪了
Width:100px;
Height100px;
然後头像大小就不用改了 ^^
  1. <style>
  2. #viewthread .avatar img{
  3. transition:width 2s, height 2s;
  4. -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
  5. -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
  6. -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
  7. }

  8. #viewthread .avatar img:hover
  9. {
  10. transform:rotate(180deg);
  11. -moz-transform:rotate(360deg); /* Firefox 4 */
  12. -webkit-transform:rotate(360deg); /* Safari and Chrome */
  13. -o-transform:rotate(360deg); /* Opera */
  14. }
  15. </style>
複製代碼

TOP

前排支持!
代码这东西,追求完美是很累的事。
喜欢研究,懂得分享才是最赞的。
资源贴,无条件支持!

TOP

感謝大大的分享~

TOP

回復 7# Yenifer


   
是的,这个东西很令人头疼,导致要改头像大小等等必须用极其麻烦的方法来做......

TOP

回復 3# 章鱼


    你说的那个用户组头像我还真没测试

不过代码与代码之间不都是存在着一点点相互排斥的么,只能二选一咯

TOP

章鱼博学多才。

TOP

謝謝教學

TOP

給樓主頂一下唷

TOP

返回列表