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

黑色理想
黑色理想
黑色理想
2925
文章
713
评论
2016年1月16日00:00:00技术分享评论18720925字阅读69分45秒
摘要

在很多使用多说的网站上看到不错的评论框样式，实在眼红，本站在网上搜集了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. }
  19. @-webkit-keyframes rotateInDownLeft {
  20.     0% {
  21.         -webkit-transform-origin: left bottombottom;
  22.         -webkit-transform: rotate(-90deg);
  23.         opacity: 0;
  24.     }
  26.     100% {
  27.         -webkit-transform-origin: left bottombottom;
  28.         -webkit-transform: rotate(0);
  29.         opacity: 1;
  30.     }
  31. }
  33. @-moz-keyframes rotateInDownLeft {
  34.     0% {
  35.         -moz-transform-origin: left bottombottom;
  36.         -moz-transform: rotate(-90deg);
  37.         opacity: 0;
  38.     }
  40.     100% {
  41.         -moz-transform-origin: left bottombottom;
  42.         -moz-transform: rotate(0);
  43.         opacity: 1;
  44.     }
  45. }
  47. @-o-keyframes rotateInDownLeft {
  48.     0% {
  49.         -o-transform-origin: left bottombottom;
  50.         -o-transform: rotate(-90deg);
  51.         opacity: 0;
  52.     }
  54.     100% {
  55.         -o-transform-origin: left bottombottom;
  56.         -o-transform: rotate(0);
  57.         opacity: 1;
  58.     }
  59. }
  61. @keyframes rotateInDownLeft {
  62.     0% {
  63.         transform-origin: left bottombottom;
  64.         transform: rotate(-90deg);
  65.         opacity: 0;
  66.     }
  68.     100% {
  69.         transform-origin: left bottombottom;
  70.         transform: rotate(0);
  71.         opacity: 1;
  72.     }
  73. }
  75. #ds-reset .ds-avatar img{
  76.     -webkit-animation-name: rotateInDownLeft;
  77.     -moz-animation-name: rotateInDownLeft;
  78.     -o-animation-name: rotateInDownLeft;
  79.     animation-name: rotateInDownLeft;
  80. }
  82. #ds-reset .ds-avatar img:hover{
  83.     -webkit-animation-name: rotateOutDownLeft;
  84.     -moz-animation-name: rotateOutDownLeft;
  85.     -o-animation-name: rotateOutDownLeft;
  86.     animation-name: rotateOutDownLeft;
  87. }
  88. @-webkit-keyframes rotateOutDownLeft {
  89.     0% {
  90.         -webkit-transform-origin: left bottombottom;
  91.         -webkit-transform: rotate(0);
  92.         opacity: 1;
  93.     }
  95.     100% {
  96.         -webkit-transform-origin: left bottombottom;
  97.         -webkit-transform: rotate(90deg);
  98.         opacity: 0;
  99.     }
  100. }
  102. @-moz-keyframes rotateOutDownLeft {
  103.     0% {
  104.         -moz-transform-origin: left bottombottom;
  105.         -moz-transform: rotate(0);
  106.         opacity: 1;
  107.     }
  109.     100% {
  110.         -moz-transform-origin: left bottombottom;
  111.         -moz-transform: rotate(90deg);
  112.         opacity: 0;
  113.     }
  114. }
  116. @-o-keyframes rotateOutDownLeft {
  117.     0% {
  118.         -o-transform-origin: left bottombottom;
  119.         -o-transform: rotate(0);
  120.         opacity: 1;
  121.     }
  123.     100% {
  124.         -o-transform-origin: left bottombottom;
  125.         -o-transform: rotate(90deg);
  126.         opacity: 0;
  127.     }
  128. }
  130. @keyframes rotateOutDownLeft {
  131.     0% {
  132.         transform-origin: left bottombottom;
  133.         transform: rotate(0);
  134.         opacity: 1;
  135.     }
  137.     100% {
  138.         transform-origin: left bottombottom;
  139.         transform: rotate(90deg);
  140.         opacity: 0;
  141.     }
  142. }

效果二代码:

展开收缩

  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. }
  19. @-webkit-keyframes bounceIn {
  20.     0% {
  21.         opacity: 0;
  22.         -webkit-transform: scale(.3);
  23.     }
  25.     50% {
  26.         opacity: 1;
  27.         -webkit-transform: scale(1.05);
  28.     }
  30.     70% {
  31.         -webkit-transform: scale(.9);
  32.     }
  34.     100% {
  35.         -webkit-transform: scale(1);
  36.     }
  37. }
  39. @-moz-keyframes bounceIn {
  40.     0% {
  41.         opacity: 0;
  42.         -moz-transform: scale(.3);
  43.     }
  45.     50% {
  46.         opacity: 1;
  47.         -moz-transform: scale(1.05);
  48.     }
  50.     70% {
  51.         -moz-transform: scale(.9);
  52.     }
  54.     100% {
  55.         -moz-transform: scale(1);
  56.     }
  57. }
  59. @-o-keyframes bounceIn {
  60.     0% {
  61.         opacity: 0;
  62.         -o-transform: scale(.3);
  63.     }
  65.     50% {
  66.         opacity: 1;
  67.         -o-transform: scale(1.05);
  68.     }
  70.     70% {
  71.         -o-transform: scale(.9);
  72.     }
  74.     100% {
  75.         -o-transform: scale(1);
  76.     }
  77. }
  79. @keyframes bounceIn {
  80.     0% {
  81.         opacity: 0;
  82.         transform: scale(.3);
  83.     }
  85.     50% {
  86.         opacity: 1;
  87.         transform: scale(1.05);
  88.     }
  90.     70% {
  91.         transform: scale(.9);
  92.     }
  94.     100% {
  95.         transform: scale(1);
  96.     }
  97. }
  99. #ds-reset .ds-avatar img {
  100.     -webkit-animation-name: bounceIn;
  101.     -moz-animation-name: bounceIn;
  102.     -o-animation-name: bounceIn;
  103.     animation-name: bounceIn;
  104. }
  105. @-webkit-keyframes bounceOut {
  106.     0% {
  107.         -webkit-transform: scale(1);
  108.     }
  110.     25% {
  111.         -webkit-transform: scale(.95);
  112.     }
  114.     50% {
  115.         opacity: 1;
  116.         -webkit-transform: scale(1.1);
  117.     }
  119.     100% {
  120.         opacity: 0;
  121.         -webkit-transform: scale(.3);
  122.     }
  123. }
  125. @-moz-keyframes bounceOut {
  126.     0% {
  127.         -moz-transform: scale(1);
  128.     }
  130.     25% {
  131.         -moz-transform: scale(.95);
  132.     }
  134.     50% {
  135.         opacity: 1;
  136.         -moz-transform: scale(1.1);
  137.     }
  139.     100% {
  140.         opacity: 0;
  141.         -moz-transform: scale(.3);
  142.     }
  143. }
  145. @-o-keyframes bounceOut {
  146.     0% {
  147.         -o-transform: scale(1);
  148.     }
  150.     25% {
  151.         -o-transform: scale(.95);
  152.     }
  154.     50% {
  155.         opacity: 1;
  156.         -o-transform: scale(1.1);
  157.     }
  159.     100% {
  160.         opacity: 0;
  161.         -o-transform: scale(.3);
  162.     }
  163. }
  165. @keyframes bounceOut {
  166.     0% {
  167.         transform: scale(1);
  168.     }
  170.     25% {
  171.         transform: scale(.95);
  172.     }
  174.     50% {
  175.         opacity: 1;
  176.         transform: scale(1.1);
  177.     }
  179.     100% {
  180.         opacity: 0;
  181.         transform: scale(.3);
  182.     }
  183. }
  185. #ds-reset .ds-avatar img:hover{
  186.     -webkit-animation-name: bounceOut;
  187.     -moz-animation-name: bounceOut;
  188.     -o-animation-name: bounceOut;
  189.     animation-name: bounceOut;
  190. }

效果三代码:

展开收缩

  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. }
  19. @-webkit-keyframes rotateIn {
  20.     0% {
  21.         -webkit-transform-origin: center center;
  22.         -webkit-transform: rotate(-150deg);
  23.         opacity: 0;
  24.     }
  26.     100% {
  27.         -webkit-transform-origin: center center;
  28.         -webkit-transform: rotate(0);
  29.         opacity: 1;
  30.     }
  31. }
  32. @-moz-keyframes rotateIn {
  33.     0% {
  34.         -moz-transform-origin: center center;
  35.         -moz-transform: rotate(-150deg);
  36.         opacity: 0;
  37.     }
  39.     100% {
  40.         -moz-transform-origin: center center;
  41.         -moz-transform: rotate(0);
  42.         opacity: 1;
  43.     }
  44. }
  45. @-o-keyframes rotateIn {
  46.     0% {
  47.         -o-transform-origin: center center;
  48.         -o-transform: rotate(-150deg);
  49.         opacity: 0;
  50.     }
  52.     100% {
  53.         -o-transform-origin: center center;
  54.         -o-transform: rotate(0);
  55.         opacity: 1;
  56.     }
  57. }
  58. @keyframes rotateIn {
  59.     0% {
  60.         transform-origin: center center;
  61.         transform: rotate(-150deg);
  62.         opacity: 0;
  63.     }
  65.     100% {
  66.         transform-origin: center center;
  67.         transform: rotate(0);
  68.         opacity: 1;
  69.     }
  70. }
  72. #ds-reset .ds-avatar img{
  73.     -webkit-animation-name: rotateIn;
  74.     -moz-animation-name: rotateIn;
  75.     -o-animation-name: rotateIn;
  76.     animation-name: rotateIn;
  77. }
  78. @-webkit-keyframes rotateOut {
  79.     0% {
  80.         -webkit-transform-origin: center center;
  81.         -webkit-transform: rotate(0);
  82.         opacity: 1;
  83.     }
  85.     100% {
  86.         -webkit-transform-origin: center center;
  87.         -webkit-transform: rotate(150deg);
  88.         opacity: 0;
  89.     }
  90. }
  92. @-moz-keyframes rotateOut {
  93.     0% {
  94.         -moz-transform-origin: center center;
  95.         -moz-transform: rotate(0);
  96.         opacity: 1;
  97.     }
  99.     100% {
  100.         -moz-transform-origin: center center;
  101.         -moz-transform: rotate(150deg);
  102.         opacity: 0;
  103.     }
  104. }
  106. @-o-keyframes rotateOut {
  107.     0% {
  108.         -o-transform-origin: center center;
  109.         -o-transform: rotate(0);
  110.         opacity: 1;
  111.     }
  113.     100% {
  114.         -o-transform-origin: center center;
  115.         -o-transform: rotate(150deg);
  116.         opacity: 0;
  117.     }
  118. }
  120. @keyframes rotateOut {
  121.     0% {
  122.         transform-origin: center center;
  123.         transform: rotate(0);
  124.         opacity: 1;
  125.     }
  127.     100% {
  128.         transform-origin: center center;
  129.         transform: rotate(150deg);
  130.         opacity: 0;
  131.     }
  132. }
  134. #ds-reset .ds-avatar img:hover{
  135.     -webkit-animation-name: rotateOut;
  136.     -moz-animation-name: rotateOut;
  137.     -o-animation-name: rotateOut;
  138.     animation-name: rotateOut;
  139. }

效果四代码:

展开收缩

  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. }
  19. @-webkit-keyframes rollIn {
  20.     0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
  21.     100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
  22. }
  24. @-moz-keyframes rollIn {
  25.     0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
  26.     100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
  27. }
  29. @-o-keyframes rollIn {
  30.     0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
  31.     100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
  32. }
  34. @keyframes rollIn {
  35.     0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
  36.     100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
  37. }
  39. #ds-reset .ds-avatar img{
  40.     -webkit-animation-name: rollIn;
  41.     -moz-animation-name: rollIn;
  42.     -o-animation-name: rollIn;
  43.     animation-name: rollIn;
  44. }
  47. @-webkit-keyframes rollOut {
  48.     0% {
  49.         opacity: 1;
  50.         -webkit-transform: translateX(0px) rotate(0deg);
  51.     }
  53.     100% {
  54.         opacity: 0;
  55.         -webkit-transform: translateX(100%) rotate(120deg);
  56.     }
  57. }
  59. @-moz-keyframes rollOut {
  60.     0% {
  61.         opacity: 1;
  62.         -moz-transform: translateX(0px) rotate(0deg);
  63.     }
  65.     100% {
  66.         opacity: 0;
  67.         -moz-transform: translateX(100%) rotate(120deg);
  68.     }
  69. }
  71. @-o-keyframes rollOut {
  72.     0% {
  73.         opacity: 1;
  74.         -o-transform: translateX(0px) rotate(0deg);
  75.     }
  77.     100% {
  78.         opacity: 0;
  79.         -o-transform: translateX(100%) rotate(120deg);
  80.     }
  81. }
  83. @keyframes rollOut {
  84.     0% {
  85.         opacity: 1;
  86.         transform: translateX(0px) rotate(0deg);
  87.     }
  89.     100% {
  90.         opacity: 0;
  91.         transform: translateX(100%) rotate(120deg);
  92.     }
  93. }
  95. #ds-reset .ds-avatar img:hover{
  96.     -webkit-animation-name: rollOut;
  97.     -moz-animation-name: rollOut;
  98.     -o-animation-name: rollOut;
  99.     animation-name: rollOut;
  100. }

效果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. }
  19. @-webkit-keyframes swing {
  20.     20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
  21.     20% { -webkit-transform: rotate(15deg); }
  22.     40% { -webkit-transform: rotate(-10deg); }
  23.     60% { -webkit-transform: rotate(5deg); }
  24.     80% { -webkit-transform: rotate(-5deg); }
  25.     100% { -webkit-transform: rotate(0deg); }
  26. }
  28. @-moz-keyframes swing {
  29.     20% { -moz-transform: rotate(15deg); }
  30.     40% { -moz-transform: rotate(-10deg); }
  31.     60% { -moz-transform: rotate(5deg); }
  32.     80% { -moz-transform: rotate(-5deg); }
  33.     100% { -moz-transform: rotate(0deg); }
  34. }
  36. @-o-keyframes swing {
  37.     20% { -o-transform: rotate(15deg); }
  38.     40% { -o-transform: rotate(-10deg); }
  39.     60% { -o-transform: rotate(5deg); }
  40.     80% { -o-transform: rotate(-5deg); }
  41.     100% { -o-transform: rotate(0deg); }
  42. }
  44. @keyframes swing {
  45.     20% { transform: rotate(15deg); }
  46.     40% { transform: rotate(-10deg); }
  47.     60% { transform: rotate(5deg); }
  48.     80% { transform: rotate(-5deg); }
  49.     100% { transform: rotate(0deg); }
  50. }
  52. #ds-reset .ds-avatar img:hover{
  53.     -webkit-transform-origin: top center;
  54.     -moz-transform-origin: top center;
  55.     -o-transform-origin: top center;
  56.     transform-origin: top center;
  57.     -webkit-animation-name: swing;
  58.     -moz-animation-name: swing;
  59.     -o-animation-name: swing;
  60.     animation-name: swing;
  61. }

效果六代码:

展开收缩

  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. }
  19. @-webkit-keyframes pulse {
  20.     0% { -webkit-transform: scale(1); }
  21.     50% { -webkit-transform: scale(1.1); }
  22.     100% { -webkit-transform: scale(1); }
  23. }
  24. @-moz-keyframes pulse {
  25.     0% { -moz-transform: scale(1); }
  26.     50% { -moz-transform: scale(1.1); }
  27.     100% { -moz-transform: scale(1); }
  28. }
  29. @-o-keyframes pulse {
  30.     0% { -o-transform: scale(1); }
  31.     50% { -o-transform: scale(1.1); }
  32.     100% { -o-transform: scale(1); }
  33. }
  34. @keyframes pulse {
  35.     0% { transform: scale(1); }
  36.     50% { transform: scale(1.1); }
  37.     100% { transform: scale(1); }
  38. }
  40. #ds-reset .ds-avatar img:hover {
  41.     -webkit-animation-name: pulse;
  42.     -moz-animation-name: pulse;
  43.     -o-animation-name: pulse;
  44.     animation-name: pulse;
  45. }

效果七代码:

展开收缩

  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. }
  19. @-webkit-keyframes wobble {
  20.   0% { -webkit-transform: translateX(0%); }
  21.   15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  22.   30% { -webkit-transform: translateX(20%) rotate(3deg); }
  23.   45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  24.   60% { -webkit-transform: translateX(10%) rotate(2deg); }
  25.   75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  26.   100% { -webkit-transform: translateX(0%); }
  27. }
  29. @-moz-keyframes wobble {
  30.   0% { -moz-transform: translateX(0%); }
  31.   15% { -moz-transform: translateX(-25%) rotate(-5deg); }
  32.   30% { -moz-transform: translateX(20%) rotate(3deg); }
  33.   45% { -moz-transform: translateX(-15%) rotate(-3deg); }
  34.   60% { -moz-transform: translateX(10%) rotate(2deg); }
  35.   75% { -moz-transform: translateX(-5%) rotate(-1deg); }
  36.   100% { -moz-transform: translateX(0%); }
  37. }
  39. @-o-keyframes wobble {
  40.   0% { -o-transform: translateX(0%); }
  41.   15% { -o-transform: translateX(-25%) rotate(-5deg); }
  42.   30% { -o-transform: translateX(20%) rotate(3deg); }
  43.   45% { -o-transform: translateX(-15%) rotate(-3deg); }
  44.   60% { -o-transform: translateX(10%) rotate(2deg); }
  45.   75% { -o-transform: translateX(-5%) rotate(-1deg); }
  46.   100% { -o-transform: translateX(0%); }
  47. }
  49. @keyframes wobble {
  50.   0% { transform: translateX(0%); }
  51.   15% { transform: translateX(-25%) rotate(-5deg); }
  52.   30% { transform: translateX(20%) rotate(3deg); }
  53.   45% { transform: translateX(-15%) rotate(-3deg); }
  54.   60% { transform: translateX(10%) rotate(2deg); }
  55.   75% { transform: translateX(-5%) rotate(-1deg); }
  56.   100% { transform: translateX(0%); }
  57. }
  59. #ds-reset .ds-avatar img:hover{
  60.     -webkit-animation-name: wobble;
  61.     -moz-animation-name: wobble;
  62.     -o-animation-name: wobble;
  63.     animation-name: wobble;
  64. }

效果八代码:

展开收缩

  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-visibility: visible !important;
  22.     -webkit-animation-name: flip;
  23.     -moz-backface-visibility: visible !important;
  24.     -moz-animation-name: flip;
  25.     -o-backface-visibility: visible !important;
  26.     -o-animation-name: flip;
  27.     backface-visibility: visible !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. }
  38. @-moz-keyframes flip {
  39. 0% {-moz-transform: perspective(400px) rotateY(0);-moz-animation-timing-function: ease-out;}
  40.  40% {-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function: ease-out;}
  41.  50% {-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function: ease-in;}
  42.  80% {-moz-transform: perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function: ease-in;}
  43.  100% {-moz-transform: perspective(400px) scale(1);-moz-animation-timing-function: ease-in;}
  44. }
  45. @-o-keyframes flip {
  46. 0% {-o-transform: perspective(400px) rotateY(0);-o-animation-timing-function: ease-out;}
  47.  40% {-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function: ease-out;}
  48.  50% {-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function: ease-in;}
  49.  80% {-o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in;}
  50.  100% {-o-transform: perspective(400px) scale(1);-o-animation-timing-function: ease-in;}
  51. }
  52. @keyframes flip {
  53. 0% {transform: perspective(400px) rotateY(0);animation-timing-function: ease-out;}
  54.  40% {transform: perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function: ease-out;}
  55.  50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function: ease-in;}
  56.  80% {transform: perspective(400px) rotateY(360deg) scale(.95);animation-timing-function: ease-in;}
  57.  100% {transform: perspective(400px) scale(1);animation-timing-function: ease-in;}
  58. }


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

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

继续阅读
历史上的今天
1月
16
黑色理想
  • 本文由 发表于 2016年1月16日00:00:00
  • 转载请务必保留本文链接：http://ilhc.cc/1531.html
奔驰引擎盖碳纤
￥ 4800元

奔驰引擎盖碳纤

奥迪储物网
￥ 35元

奥迪储物网

沃尔沃油门踏板
￥ 168元

沃尔沃油门踏板

汽车座椅防漏保护套
￥ 29元

汽车座椅防漏保护套

5种方法获取Bing每日图片 技术分享

5种方法获取Bing每日图片

写在前面的：大家都知道微软的Bing搜索引擎首页每天都会提供了一些有趣的图片，而这些图片很多都是有故事含义的，很多网友每天去访问bing首页都是为了这些图片而去的。那么怎么Download下来呢，下面...
2021年6月16日550技术人生评论
匿名

发表评论

匿名网友 填写信息

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