0

我正在尝试用纯 css3 制作动画。动画将是从左到右移动的眼睛，我的问题是我使用径向渐变背景作为眼睛，但在 Internet Explorer 上这种效果看起来不起作用，但在 Chrome 和 Firefox 上效果很好。

你可以在这里看到一个演示：http: //jsfiddle.net/h6VYd/

这里的CSS代码：

body {

}

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: -webkit-gradient(radial, 50% 40%, 0, 50% 40%, 100, color-stop(0%, #fcfcfc), color-stop(66%, #efeff1), color-stop(100%, #9b5050));
  background: -webkit-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
  background: -moz-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
  background: -o-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
  background: radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);
}
.ball:after {
  content: "";
  position: absolute;
  top: 5%;
  left: 10%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 24, color-stop(0%, rgba(255, 255, 255, 0.8)), color-stop(14%, rgba(255, 255, 255, 0.8)), color-stop(24%, rgba(255, 255, 255, 0)));
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  background: -moz-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  background: -o-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  background: radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  transform: translateX(-80px) translateY(-90px) skewX(-20deg);
}

.iris {
  width: 40%;
  height: 40%;
  margin: 30%;
  border-radius: 50%;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #208ab4), color-stop(30%, #6fbfff), color-stop(100%, #4381b2));
  background: -webkit-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  background: -moz-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  background: -o-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  background: radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  -webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  -moz-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  -ms-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  -o-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  position: absolute;
  -webkit-animation: move-eye-skew 5s ease-out infinite;
  -moz-animation: move-eye-skew 5s ease-out infinite;
  -o-animation: move-eye-skew 5s ease-out infinite;
  -ms-animation: move-eye-skew 5s ease-out infinite;
  animation: move-eye-skew 5s ease-out infinite;
}
.iris:before {
  content: "";
  display: block;
  position: absolute;
  width: 37.5%;
  height: 37.5%;
  border-radius: 50%;
  top: 31.25%;
  left: 31.25%;
  background: black;
}
.iris:after {
  content: "";
  display: block;
  position: absolute;
  width: 31.25%;
  height: 31.25%;
  border-radius: 50%;
  top: 18.75%;
  left: 18.75%;
  background: rgba(255, 255, 255, 0.2);
}


.stage {
  width: 40px;
  height: 40px;
  display: inline-block;
}

@-moz-keyframes move-eye-skew {
  0% {
    -moz-transform: none;
    transform: none; }

  20% {
    -moz-transform: translateX(-10px) ;
    transform: translateX(-10px); }

  25%, 44% {
    -moz-transform: none;
    transform: none; }

  50%, 60% {
    -moz-transform: translateX(10px) ;
    transform: translateX(10px); }

  66%, 100% {
    -moz-transform: none;
    transform: none; } }

@-webkit-keyframes move-eye-skew {
  0% {
    -webkit-transform: none;
    transform: none; }

  20% {
    -webkit-transform: translateX(-10px) ;
    transform: translateX(-10px) ;}

  25%, 44% {
    -webkit-transform: none;
    transform: none; }

  50%, 60% {
    -webkit-transform: translateX(10px) ;
    transform: translateX(10px); }

  66%, 100% {
    -webkit-transform: none;
    transform: none; } }

@-o-keyframes move-eye-skew {
  0% {
    -o-transform: none;
    transform: none; }

  20% {
    -o-transform: translateX(-10px) ;
    transform: translateX(-10px); }

  25%, 44% {
    -o-transform: none;
    transform: none; }

  50%, 60% {
    -o-transform: translateX(10px);
    transform: translateX(10px); }

  66%, 100% {
    -o-transform: none;
    transform: none; } }

@-ms-keyframes move-eye-skew {
  0% {
    -ms-transform: none;
    transform: none; }

  20% {
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }

  25%, 44% {
    -ms-transform: none;
    transform: none; }

  50%, 60% {
    -ms-transform: translateX(10px);
    transform: translateX(10px); }

  66%, 100% {
    -ms-transform: none;
    transform: none; } }

@keyframes move-eye-skew {
  0% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none; }

  20% {
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -o-transform: translateX(-10px);
    transform: translateX(-10px); }

  25%, 44% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none; }

  50%, 60% {
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    -o-transform: translateX(10px);
    transform: translateX(10px); }

  66%, 100% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none; } }
4

1 回答 1

4

您需要添加-ms-radial-gradientCSS 声明。

例如：

background: -ms-radial-gradient(50% 40%, circle cover, #fcfcfc, #efeff1 66%, #9b5050 100%);

这是工作的jsFiddle。

于 2013-09-19T07:26:26.477 回答