免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [分享] 分享一个让帖内投像360度旋转的代码 [打印本頁]
作者: Yenifer    時間: 2013-10-29 21:08     標題: 分享一个让帖内投像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. }

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

支持
作者: 章鱼    時間: 2013-10-29 22:15

这里要说一下,坑爹的dz把用户组头像的图片也放在.avatar里面了...所以这个代码不能用于使用了用户组头像的论坛
作者: superman1024    時間: 2013-10-29 23:04

給樓主頂一下唷
作者: 憨憨兒    時間: 2013-10-29 23:09

謝謝教學
作者: pigeon    時間: 2013-10-30 07:13

章鱼博学多才。
作者: Yenifer    時間: 2013-10-30 08:49

回復 3# 章鱼


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

不过代码与代码之间不都是存在着一点点相互排斥的么，只能二选一咯
作者: 章鱼    時間: 2013-10-30 12:51

回復 7# Yenifer


   
是的,这个东西很令人头疼,导致要改头像大小等等必须用极其麻烦的方法来做......
作者: sf2tmakss    時間: 2013-10-30 20:43

感謝大大的分享~
作者: xiangzi8821    時間: 2013-11-1 12:56

前排支持！
代码这东西，追求完美是很累的事。
喜欢研究，懂得分享才是最赞的。
资源贴，无条件支持！
作者: Kajes    時間: 2015-7-14 19:37

用户组头的话,可以直接兩個刪了
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. }

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

感谢分享



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://utmall.com/discuz/) Powered by Discuz! 7.2