多说自定义CSS样式大全附效果图

  • A+
所属分类:技术分享
摘 要

在很多使用多说的网站上看到不错的评论框样式,实在眼红,本站在网上搜集了9种多少自定义CSS样式代码,让您网站的多说评论框,也动起来吧!

一个多说的自定义CSS效果,实现圆角头像,鼠标移上时旋转的效果,就是下面的效果八。因为看了那个玩意儿觉得很有意思,所以才萌生了写这篇技术文的想法。我想很多多说的用户都会需要的。我今天写到的CSS3效果是之前在网上找到收藏的代码素材,现在应用到多说上。

话不多说,正文开始。

先上图,各种效果我都做成了GIF动态图,光光截这些图都花了我好长的时间。大家可以很直观的看到效果。毕竟是图片,实际效果当然会更好的多。代码在最下面

效果一代码:
展开

  1. #ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
  2.     -webkit-animation-fill-mode: both;
  3.     -moz-animation-fill-mode: both;
  4.     -ms-animation-fill-mode: both;
  5.     -o-animation-fill-mode: both;
  6.     animation-fill-mode: both;
  7.     -webkit-animation-duration: 0s;
  8.     -moz-animation-duration: 0s;
  9.     -ms-animation-duration: 0s;
  10.     -o-animation-duration: 0s;
  11.     animation-duration: 0s;
  12.     -webkit-animation-duration: 1s;
  13.     -moz-animation-duration: 1s;
  14.     -ms-animation-duration: 1s;
  15.     -o-animation-duration: 1s;
  16.     animation-duration: 1s;
  17. }
  18. @-webkit-keyframes rotateInDownLeft {
  19.     0% {
  20.         -webkit-transform-origin: left bottombottom;
  21.         -webkit-transform: rotate(-90deg);
  22.         opacity: 0;
  23.     }
  24.     100% {
  25.         -webkit-transform-origin: left bottombottom;
  26.         -webkit-transform: rotate(0);
  27.         opacity: 1;
  28.     }
  29. }
  30. @-moz-keyframes rotateInDownLeft {
  31.     0% {
  32.         -moz-transform-origin: left bottombottom;
  33.         -moz-transform: rotate(-90deg);
  34.         opacity: 0;
  35.     }
  36.     100% {
  37.         -moz-transform-origin: left bottombottom;
  38.         -moz-transform: rotate(0);
  39.         opacity: 1;
  40.     }
  41. }
  42. @-o-keyframes rotateInDownLeft {
  43.     0% {
  44.         -o-transform-origin: left bottombottom;
  45.         -o-transform: rotate(-90deg);
  46.         opacity: 0;
  47.     }
  48.     100% {
  49.         -o-transform-origin: left bottombottom;
  50.         -o-transform: rotate(0);
  51.         opacity: 1;
  52.     }
  53. }
  54. @keyframes rotateInDownLeft {
  55.     0% {
  56.         transform-origin: left bottombottom;
  57.         transform: rotate(-90deg);
  58.         opacity: 0;
  59.     }
  60.     100% {
  61.         transform-origin: left bottombottom;
  62.         transform: rotate(0);
  63.         opacity: 1;
  64.     }
  65. }
  66. #ds-reset .ds-avatar img{
  67.     -webkit-animation-name: rotateInDownLeft;
  68.     -moz-animation-name: rotateInDownLeft;
  69.     -o-animation-name: rotateInDownLeft;
  70.     animation-name: rotateInDownLeft;
  71. }
  72. #ds-reset .ds-avatar img:hover{
  73.     -webkit-animation-name: rotateOutDownLeft;
  74.     -moz-animation-name: rotateOutDownLeft;
  75.     -o-animation-name: rotateOutDownLeft;
  76.     animation-name: rotateOutDownLeft;
  77. }
  78. @-webkit-keyframes rotateOutDownLeft {
  79.     0% {
  80.         -webkit-transform-origin: left bottombottom;
  81.         -webkit-transform: rotate(0);
  82.         opacity: 1;
  83.     }
  84.     100% {
  85.         -webkit-transform-origin: left bottombottom;
  86.         -webkit-transform: rotate(90deg);
  87.         opacity: 0;
  88.     }
  89. }
  90. @-moz-keyframes rotateOutDownLeft {
  91.     0% {
  92.         -moz-transform-origin: left bottombottom;
  93.         -moz-transform: rotate(0);
  94.         opacity: 1;
  95.     }
  96.     100% {
  97.         -moz-transform-origin: left bottombottom;
  98.         -moz-transform: rotate(90deg);
  99.         opacity: 0;
  100.     }
  101. }
  102. @-o-keyframes rotateOutDownLeft {
  103.     0% {
  104.         -o-transform-origin: left bottombottom;
  105.         -o-transform: rotate(0);
  106.         opacity: 1;
  107.     }
  108.     100% {
  109.         -o-transform-origin: left bottombottom;
  110.         -o-transform: rotate(90deg);
  111.         opacity: 0;
  112.     }
  113. }
  114. @keyframes rotateOutDownLeft {
  115.     0% {
  116.         transform-origin: left bottombottom;
  117.         transform: rotate(0);
  118.         opacity: 1;
  119.     }
  120.     100% {
  121.         transform-origin: left bottombottom;
  122.         transform: rotate(90deg);
  123.         opacity: 0;
  124.     }
  125. }

效果二代码:
展开

  1. #ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
  2.     -webkit-animation-fill-mode: both;
  3.     -moz-animation-fill-mode: both;
  4.     -ms-animation-fill-mode: both;
  5.     -o-animation-fill-mode: both;
  6.     animation-fill-mode: both;
  7.     -webkit-animation-duration: 0s;
  8.     -moz-animation-duration: 0s;
  9.     -ms-animation-duration: 0s;
  10.     -o-animation-duration: 0s;
  11.     animation-duration: 0s;
  12.     -webkit-animation-duration: 0.7s;
  13.     -moz-animation-duration: 0.7s;
  14.     -ms-animation-duration: 0.7s;
  15.     -o-animation-duration: 0.7s;
  16.     animation-duration: 0.7s;
  17. }
  18. @-webkit-keyframes bounceIn {
  19.     0% {
  20.         opacity: 0;
  21.         -webkit-transform: scale(.3);
  22.     }
  23.     50% {
  24.         opacity: 1;
  25.         -webkit-transform: scale(1.05);
  26.     }
  27.     70% {
  28.         -webkit-transform: scale(.9);
  29.     }
  30.     100% {
  31.         -webkit-transform: scale(1);
  32.     }
  33. }
  34. @-moz-keyframes bounceIn {
  35.     0% {
  36.         opacity: 0;
  37.         -moz-transform: scale(.3);
  38.     }
  39.     50% {
  40.         opacity: 1;
  41.         -moz-transform: scale(1.05);
  42.     }
  43.     70% {
  44.         -moz-transform: scale(.9);
  45.     }
  46.     100% {
  47.         -moz-transform: scale(1);
  48.     }
  49. }
  50. @-o-keyframes bounceIn {
  51.     0% {
  52.         opacity: 0;
  53.         -o-transform: scale(.3);
  54.     }
  55.     50% {
  56.         opacity: 1;
  57.         -o-transform: scale(1.05);
  58.     }
  59.     70% {
  60.         -o-transform: scale(.9);
  61.     }
  62.     100% {
  63.         -o-transform: scale(1);
  64.     }
  65. }
  66. @keyframes bounceIn {
  67.     0% {
  68.         opacity: 0;
  69.         transform: scale(.3);
  70.     }
  71.     50% {
  72.         opacity: 1;
  73.         transform: scale(1.05);
  74.     }
  75.     70% {
  76.         transform: scale(.9);
  77.     }
  78.     100% {
  79.         transform: scale(1);
  80.     }
  81. }
  82. #ds-reset .ds-avatar img {
  83.     -webkit-animation-name: bounceIn;
  84.     -moz-animation-name: bounceIn;
  85.     -o-animation-name: bounceIn;
  86.     animation-name: bounceIn;
  87. }
  88. @-webkit-keyframes bounceOut {
  89.     0% {
  90.         -webkit-transform: scale(1);
  91.     }
  92.     25% {
  93.         -webkit-transform: scale(.95);
  94.     }
  95.     50% {
  96.         opacity: 1;
  97.         -webkit-transform: scale(1.1);
  98.     }
  99.     100% {
  100.         opacity: 0;
  101.         -webkit-transform: scale(.3);
  102.     }
  103. }
  104. @-moz-keyframes bounceOut {
  105.     0% {
  106.         -moz-transform: scale(1);
  107.     }
  108.     25% {
  109.         -moz-transform: scale(.95);
  110.     }
  111.     50% {
  112.         opacity: 1;
  113.         -moz-transform: scale(1.1);
  114.     }
  115.     100% {
  116.         opacity: 0;
  117.         -moz-transform: scale(.3);
  118.     }
  119. }
  120. @-o-keyframes bounceOut {
  121.     0% {
  122.         -o-transform: scale(1);
  123.     }
  124.     25% {
  125.         -o-transform: scale(.95);
  126.     }
  127.     50% {
  128.         opacity: 1;
  129.         -o-transform: scale(1.1);
  130.     }
  131.     100% {
  132.         opacity: 0;
  133.         -o-transform: scale(.3);
  134.     }
  135. }
  136. @keyframes bounceOut {
  137.     0% {
  138.         transform: scale(1);
  139.     }
  140.     25% {
  141.         transform: scale(.95);
  142.     }
  143.     50% {
  144.         opacity: 1;
  145.         transform: scale(1.1);
  146.     }
  147.     100% {
  148.         opacity: 0;
  149.         transform: scale(.3);
  150.     }
  151. }
  152. #ds-reset .ds-avatar img:hover{
  153.     -webkit-animation-name: bounceOut;
  154.     -moz-animation-name: bounceOut;
  155.     -o-animation-name: bounceOut;
  156.     animation-name: bounceOut;
  157. }

效果三代码:
展开

  1. #ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
  2.     -webkit-animation-fill-mode: both;
  3.     -moz-animation-fill-mode: both;
  4.     -ms-animation-fill-mode: both;
  5.     -o-animation-fill-mode: both;
  6.     animation-fill-mode: both;
  7.     -webkit-animation-duration: 0s;
  8.     -moz-animation-duration: 0s;
  9.     -ms-animation-duration: 0s;
  10.     -o-animation-duration: 0s;
  11.     animation-duration: 0s;
  12.     -webkit-animation-duration: 0.7s;
  13.     -moz-animation-duration: 0.7s;
  14.     -ms-animation-duration: 0.7s;
  15.     -o-animation-duration: 0.7s;
  16.     animation-duration: 0.7s;
  17. }
  18. @-webkit-keyframes rotateIn {
  19.     0% {
  20.         -webkit-transform-origin: center center;
  21.         -webkit-transform: rotate(-150deg);
  22.         opacity: 0;
  23.     }
  24.     100% {
  25.         -webkit-transform-origin: center center;
  26.         -webkit-transform: rotate(0);
  27.         opacity: 1;
  28.     }
  29. }
  30. @-moz-keyframes rotateIn {
  31.     0% {
  32.         -moz-transform-origin: center center;
  33.         -moz-transform: rotate(-150deg);
  34.         opacity: 0;
  35.     }
  36.     100% {
  37.         -moz-transform-origin: center center;
  38.         -moz-transform: rotate(0);
  39.         opacity: 1;
  40.     }
  41. }
  42. @-o-keyframes rotateIn {
  43.     0% {
  44.         -o-transform-origin: center center;
  45.         -o-transform: rotate(-150deg);
  46.         opacity: 0;
  47.     }
  48.     100% {
  49.         -o-transform-origin: center center;
  50.         -o-transform: rotate(0);
  51.         opacity: 1;
  52.     }
  53. }
  54. @keyframes rotateIn {
  55.     0% {
  56.         transform-origin: center center;
  57.         transform: rotate(-150deg);
  58.         opacity: 0;
  59.     }
  60.     100% {
  61.         transform-origin: center center;
  62.         transform: rotate(0);
  63.         opacity: 1;
  64.     }
  65. }
  66. #ds-reset .ds-avatar img{
  67.     -webkit-animation-name: rotateIn;
  68.     -moz-animation-name: rotateIn;
  69.     -o-animation-name: rotateIn;
  70.     animation-name: rotateIn;
  71. }
  72. @-webkit-keyframes rotateOut {
  73.     0% {
  74.         -webkit-transform-origin: center center;
  75.         -webkit-transform: rotate(0);
  76.         opacity: 1;
  77.     }
  78.     100% {
  79.         -webkit-transform-origin: center center;
  80.         -webkit-transform: rotate(150deg);
  81.         opacity: 0;
  82.     }
  83. }
  84. @-moz-keyframes rotateOut {
  85.     0% {
  86.         -moz-transform-origin: center center;
  87.         -moz-transform: rotate(0);
  88.         opacity: 1;
  89.     }
  90.     100% {
  91.         -moz-transform-origin: center center;
  92.         -moz-transform: rotate(150deg);
  93.         opacity: 0;
  94.     }
  95. }
  96. @-o-keyframes rotateOut {
  97.     0% {
  98.         -o-transform-origin: center center;
  99.         -o-transform: rotate(0);
  100.         opacity: 1;
  101.     }
  102.     100% {
  103.         -o-transform-origin: center center;
  104.         -o-transform: rotate(150deg);
  105.         opacity: 0;
  106.     }
  107. }
  108. @keyframes rotateOut {
  109.     0% {
  110.         transform-origin: center center;
  111.         transform: rotate(0);
  112.         opacity: 1;
  113.     }
  114.     100% {
  115.         transform-origin: center center;
  116.         transform: rotate(150deg);
  117.         opacity: 0;
  118.     }
  119. }
  120. #ds-reset .ds-avatar img:hover{
  121.     -webkit-animation-name: rotateOut;
  122.     -moz-animation-name: rotateOut;
  123.     -o-animation-name: rotateOut;
  124.     animation-name: rotateOut;
  125. }

效果四代码:
展开

  1. #ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
  2.     -webkit-animation-fill-mode: both;
  3.     -moz-animation-fill-mode: both;
  4.     -ms-animation-fill-mode: both;
  5.     -o-animation-fill-mode: both;
  6.     animation-fill-mode: both;
  7.     -webkit-animation-duration: 0s;
  8.     -moz-animation-duration: 0s;
  9.     -ms-animation-duration: 0s;
  10.     -o-animation-duration: 0s;
  11.     animation-duration: 0s;
  12.     -webkit-animation-duration: 0.7s;
  13.     -moz-animation-duration: 0.7s;
  14.     -ms-animation-duration: 0.7s;
  15.     -o-animation-duration: 0.7s;
  16.     animation-duration: 0.7s;
  17. }
  18. @-webkit-keyframes rollIn {
  19.     0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
  20.     100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
  21. }
  22. @-moz-keyframes rollIn {
  23.     0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
  24.     100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
  25. }
  26. @-o-keyframes rollIn {
  27.     0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
  28.     100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
  29. }
  30. @keyframes rollIn {
  31.     0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
  32.     100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
  33. }
  34. #ds-reset .ds-avatar img{
  35.     -webkit-animation-name: rollIn;
  36.     -moz-animation-name: rollIn;
  37.     -o-animation-name: rollIn;
  38.     animation-name: rollIn;
  39. }
  40. @-webkit-keyframes rollOut {
  41.     0% {
  42.         opacity: 1;
  43.         -webkit-transform: translateX(0px) rotate(0deg);
  44.     }
  45.     100% {
  46.         opacity: 0;
  47.         -webkit-transform: translateX(100%) rotate(120deg);
  48.     }
  49. }
  50. @-moz-keyframes rollOut {
  51.     0% {
  52.         opacity: 1;
  53.         -moz-transform: translateX(0px) rotate(0deg);
  54.     }
  55.     100% {
  56.         opacity: 0;
  57.         -moz-transform: translateX(100%) rotate(120deg);
  58.     }
  59. }
  60. @-o-keyframes rollOut {
  61.     0% {
  62.         opacity: 1;
  63.         -o-transform: translateX(0px) rotate(0deg);
  64.     }
  65.     100% {
  66.         opacity: 0;
  67.         -o-transform: translateX(100%) rotate(120deg);
  68.     }
  69. }
  70. @keyframes rollOut {
  71.     0% {
  72.         opacity: 1;
  73.         transform: translateX(0px) rotate(0deg);
  74.     }
  75.     100% {
  76.         opacity: 0;
  77.         transform: translateX(100%) rotate(120deg);
  78.     }
  79. }
  80. #ds-reset .ds-avatar img:hover{
  81.     -webkit-animation-name: rollOut;
  82.     -moz-animation-name: rollOut;
  83.     -o-animation-name: rollOut;
  84.     animation-name: rollOut;
  85. }

效果5代码:
展开

  1. #ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
  2.     -webkit-animation-fill-mode: both;
  3.     -moz-animation-fill-mode: both;
  4.     -ms-animation-fill-mode: both;
  5.     -o-animation-fill-mode: both;
  6.     animation-fill-mode: both;
  7.     -webkit-animation-duration: 0s;
  8.     -moz-animation-duration: 0s;
  9.     -ms-animation-duration: 0s;
  10.     -o-animation-duration: 0s;
  11.     animation-duration: 0s;
  12.     -webkit-animation-duration: 0.7s;
  13.     -moz-animation-duration: 0.7s;
  14.     -ms-animation-duration: 0.7s;
  15.     -o-animation-duration: 0.7s;
  16.     animation-duration: 0.7s;
  17. }
  18. @-webkit-keyframes swing {
  19.     20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
  20.     20% { -webkit-transform: rotate(15deg); }
  21.     40% { -webkit-transform: rotate(-10deg); }
  22.     60% { -webkit-transform: rotate(5deg); }
  23.     80% { -webkit-transform: rotate(-5deg); }
  24.     100% { -webkit-transform: rotate(0deg); }
  25. }
  26. @-moz-keyframes swing {
  27.     20% { -moz-transform: rotate(15deg); }
  28.     40% { -moz-transform: rotate(-10deg); }
  29.     60% { -moz-transform: rotate(5deg); }
  30.     80% { -moz-transform: rotate(-5deg); }
  31.     100% { -moz-transform: rotate(0deg); }
  32. }
  33. @-o-keyframes swing {
  34.     20% { -o-transform: rotate(15deg); }
  35.     40% { -o-transform: rotate(-10deg); }
  36.     60% { -o-transform: rotate(5deg); }
  37.     80% { -o-transform: rotate(-5deg); }
  38.     100% { -o-transform: rotate(0deg); }
  39. }
  40. @keyframes swing {
  41.     20% { transform: rotate(15deg); }
  42.     40% { transform: rotate(-10deg); }
  43.     60% { transform: rotate(5deg); }
  44.     80% { transform: rotate(-5deg); }
  45.     100% { transform: rotate(0deg); }
  46. }
  47. #ds-reset .ds-avatar img:hover{
  48.     -webkit-transform-origin: top center;
  49.     -moz-transform-origin: top center;
  50.     -o-transform-origin: top center;
  51.     transform-origin: top center;
  52.     -webkit-animation-name: swing;
  53.     -moz-animation-name: swing;
  54.     -o-animation-name: swing;
  55.     animation-name: swing;
  56. }

效果六代码:
展开

  1. #ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
  2.     -webkit-animation-fill-mode: both;
  3.     -moz-animation-fill-mode: both;
  4.     -ms-animation-fill-mode: both;
  5.     -o-animation-fill-mode: both;
  6.     animation-fill-mode: both;
  7.     -webkit-animation-duration: 0s;
  8.     -moz-animation-duration: 0s;
  9.     -ms-animation-duration: 0s;
  10.     -o-animation-duration: 0s;
  11.     animation-duration: 0s;
  12.     -webkit-animation-duration: 0.7s;
  13.     -moz-animation-duration: 0.7s;
  14.     -ms-animation-duration: 0.7s;
  15.     -o-animation-duration: 0.7s;
  16.     animation-duration: 0.7s;
  17. }
  18. @-webkit-keyframes pulse {
  19.     0% { -webkit-transform: scale(1); }
  20.     50% { -webkit-transform: scale(1.1); }
  21.     100% { -webkit-transform: scale(1); }
  22. }
  23. @-moz-keyframes pulse {
  24.     0% { -moz-transform: scale(1); }
  25.     50% { -moz-transform: scale(1.1); }
  26.     100% { -moz-transform: scale(1); }
  27. }
  28. @-o-keyframes pulse {
  29.     0% { -o-transform: scale(1); }
  30.     50% { -o-transform: scale(1.1); }
  31.     100% { -o-transform: scale(1); }
  32. }
  33. @keyframes pulse {
  34.     0% { transform: scale(1); }
  35.     50% { transform: scale(1.1); }
  36.     100% { transform: scale(1); }
  37. }
  38. #ds-reset .ds-avatar img:hover {
  39.     -webkit-animation-name: pulse;
  40.     -moz-animation-name: pulse;
  41.     -o-animation-name: pulse;
  42.     animation-name: pulse;
  43. }

效果七代码:
展开

  1. #ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{
  2.     -webkit-animation-fill-mode: both;
  3.     -moz-animation-fill-mode: both;
  4.     -ms-animation-fill-mode: both;
  5.     -o-animation-fill-mode: both;
  6.     animation-fill-mode: both;
  7.     -webkit-animation-duration: 0s;
  8.     -moz-animation-duration: 0s;
  9.     -ms-animation-duration: 0s;
  10.     -o-animation-duration: 0s;
  11.     animation-duration: 0s;
  12.     -webkit-animation-duration: 0.7s;
  13.     -moz-animation-duration: 0.7s;
  14.     -ms-animation-duration: 0.7s;
  15.     -o-animation-duration: 0.7s;
  16.     animation-duration: 0.7s;
  17. }
  18. @-webkit-keyframes wobble {
  19.   0% { -webkit-transform: translateX(0%); }
  20.   15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  21.   30% { -webkit-transform: translateX(20%) rotate(3deg); }
  22.   45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  23.   60% { -webkit-transform: translateX(10%) rotate(2deg); }
  24.   75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  25.   100% { -webkit-transform: translateX(0%); }
  26. }
  27. @-moz-keyframes wobble {
  28.   0% { -moz-transform: translateX(0%); }
  29.   15% { -moz-transform: translateX(-25%) rotate(-5deg); }
  30.   30% { -moz-transform: translateX(20%) rotate(3deg); }
  31.   45% { -moz-transform: translateX(-15%) rotate(-3deg); }
  32.   60% { -moz-transform: translateX(10%) rotate(2deg); }
  33.   75% { -moz-transform: translateX(-5%) rotate(-1deg); }
  34.   100% { -moz-transform: translateX(0%); }
  35. }
  36. @-o-keyframes wobble {
  37.   0% { -o-transform: translateX(0%); }
  38.   15% { -o-transform: translateX(-25%) rotate(-5deg); }
  39.   30% { -o-transform: translateX(20%) rotate(3deg); }
  40.   45% { -o-transform: translateX(-15%) rotate(-3deg); }
  41.   60% { -o-transform: translateX(10%) rotate(2deg); }
  42.   75% { -o-transform: translateX(-5%) rotate(-1deg); }
  43.   100% { -o-transform: translateX(0%); }
  44. }
  45. @keyframes wobble {
  46.   0% { transform: translateX(0%); }
  47.   15% { transform: translateX(-25%) rotate(-5deg); }
  48.   30% { transform: translateX(20%) rotate(3deg); }
  49.   45% { transform: translateX(-15%) rotate(-3deg); }
  50.   60% { transform: translateX(10%) rotate(2deg); }
  51.   75% { transform: translateX(-5%) rotate(-1deg); }
  52.   100% { transform: translateX(0%); }
  53. }
  54. #ds-reset .ds-avatar img:hover{
  55.     -webkit-animation-name: wobble;
  56.     -moz-animation-name: wobble;
  57.     -o-animation-name: wobble;
  58.     animation-name: wobble;
  59. }

效果八代码:
展开

  1. #ds-reset .ds-avatar img{
  2.     width:54px;height:54px/*设置图像的长和宽,这里要根据自己的评论框情况更改*/
  3.     border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
  4.     -webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/
  5.     -moz-border-radius:27px;
  6.     box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
  7.     -webkit-box-shadow: inset 0 -1px 0 #3333sf;
  8.     -webkit-transition: 0.4s;
  9.     -webkit-transition: -webkit-transform 0.4s ease-out;
  10.     transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/
  11.     -moz-transition: -moz-transform 0.4s ease-out;
  12. }
  13. #ds-reset .ds-avatar img:hover{/*设置鼠标悬浮在头像时的CSS样式*/
  14.     box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
  15.     -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
  16.     transform: rotateZ(360deg);/*图像旋转360度*/
  17.     -webkit-transform: rotateZ(360deg);
  18.     -moz-transform: rotateZ(360deg);
  19. }

效果九代码:
展开

  1. #ds-reset .ds-avatar img:hover {
  2.     -webkit-animation-fill-mode: both;
  3.     -moz-animation-fill-mode: both;
  4.     -ms-animation-fill-mode: both;
  5.     -o-animation-fill-mode: both;
  6.     animation-fill-mode: both;
  7.     -webkit-animation-duration: 0s;
  8.     -moz-animation-duration: 0s;
  9.     -ms-animation-duration: 0s;
  10.     -o-animation-duration: 0s;
  11.     animation-duration: 0s;
  12.     -webkit-animation-duration: 1s;
  13.     -moz-animation-duration: 1s;
  14.     -ms-animation-duration: 1s;
  15.     -o-animation-duration: 1s;
  16.     animation-duration: 1s;
  17.     -webkit-transform-style: preserve-3d;
  18.     -moz-transform-style: preserve-3d;
  19.     -o-transform-style: preserve-3d;
  20.     transform-style: preserve-3d;
  21.     -webkit-backface-visibilityvisible !important;
  22.     -webkit-animation-name: flip;
  23.     -moz-backface-visibilityvisible !important;
  24.     -moz-animation-name: flip;
  25.     -o-backface-visibilityvisible !important;
  26.     -o-animation-name: flip;
  27.     backface-visibilityvisible !important;
  28.     animation-name: flip;
  29. }
  30.  @-webkit-keyframes flip {
  31.  0% {-webkit-transform: perspective(400px) rotateY(0);-webkit-animation-timing-function: ease-out;}
  32.  40% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function: ease-out;}
  33.  50% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function: ease-in;}
  34.  80% {-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function: ease-in;}
  35.  100% {-webkit-transform: perspective(400px) scale(1);-webkit-animation-timing-function: ease-in;}
  36. }
  37. @-moz-keyframes flip {
  38. 0% {-moz-transform: perspective(400px) rotateY(0);-moz-animation-timing-function: ease-out;}
  39.  40% {-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function: ease-out;}
  40.  50% {-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function: ease-in;}
  41.  80% {-moz-transform: perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function: ease-in;}
  42.  100% {-moz-transform: perspective(400px) scale(1);-moz-animation-timing-function: ease-in;}
  43. }
  44. @-o-keyframes flip {
  45. 0% {-o-transform: perspective(400px) rotateY(0);-o-animation-timing-function: ease-out;}
  46.  40% {-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function: ease-out;}
  47.  50% {-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function: ease-in;}
  48.  80% {-o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in;}
  49.  100% {-o-transform: perspective(400px) scale(1);-o-animation-timing-function: ease-in;}
  50. }
  51. @keyframes flip {
  52. 0% {transform: perspective(400px) rotateY(0);animation-timing-function: ease-out;}
  53.  40% {transform: perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function: ease-out;}
  54.  50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function: ease-in;}
  55.  80% {transform: perspective(400px) rotateY(360deg) scale(.95);animation-timing-function: ease-in;}
  56.  100% {transform: perspective(400px) scale(1);animation-timing-function: ease-in;}
  57. }


代码在下面(请用非IE浏览器看),将代码粘贴到多说评论-个性化设置-自定义CSS 里,刷新即可看到效果。

ps:代码都是共通的,不局限于多说,应用在别的效果上也是可以的。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: