带图像的动画 css

Question

我需要做这种代码，不用js或者别的，只用css和html。 我需要做的是用图像改变彩色球，做同样的动画：

p.prova {
  border-radius:50%;
  height:2px; width:2px; /* To allow border-radius to work */
  position:absolute;
  top:50%; left:50%;
  margin-top:-1px; margin-left:-1px;
  box-shadow:
    -75px -125px 0 40px #6cce74, /*INIZIO*/
     75px -125px 0 40px #c18d46,
    150px    0px 0 40px #c14745,
     75px  125px 0 40px #2e1e5b,
    -75px  125px 0 40px #9c37a6,
   -150px    0px 0 40px #76bdd1;
  -webkit-animation:rotate 12s infinite linear;
  animation:rotate 12s infinite linear;
}
@keyframes rotate {



  100% {
    transform:rotate(-360deg);
    box-shadow:
      -75px -125px 0 40px #6cce74,
       75px -125px 0 40px #c18d46,
      150px    0px 0 40px #c14745,
       75px  125px 0 40px #2e1e5b,
      -75px  125px 0 40px #9c37a6,
     -150px    0px 0 40px #76bdd1;
  }
}
@-webkit-keyframes rotate {
  16.67% {
    box-shadow:
      -75px -125px 0 40px #76bdd1,
       75px -125px 0 40px #6cce74,
      150px    0px 0 40px #c18d46,
       75px  125px 0 40px #c14745,
      -75px  125px 0 40px #2e1e5b,
     -150px    0px 0 40px #9c37a6;
  }
  33.33%   { 
    box-shadow:
      -75px -125px 0 40px #9c37a6,
       75px -125px 0 40px #76bdd1,
      150px    0px 0 40px #6cce74,
       75px  125px 0 40px #c18d46,
      -75px  125px 0 40px #c14745,
     -150px    0px 0 40px #2e1e5b;
  }
  50%      { 
    box-shadow:
      -75px -125px 0 40px #2e1e5b,
       75px -125px 0 40px #9c37a6,
      150px    0px 0 40px #76bdd1,
       75px  125px 0 40px #6cce74,
      -75px  125px 0 40px #c18d46,
     -150px    0px 0 40px #c14745;
  }
  66.67%   { 
    box-shadow:
      -75px -125px 0 40px #c14745,
       75px -125px 0 40px #2e1e5b,
      150px    0px 0 40px #9c37a6,
       75px  125px 0 40px #76bdd1,
      -75px  125px 0 40px #6cce74,
     -150px    0px 0 40px #c18d46;
  }
  88.88%   { 
    box-shadow:
      -75px -125px 0 40px #c18d46,
       75px -125px 0 40px #c14745,
      150px    0px 0 40px #2e1e5b,
       75px  125px 0 40px #9c37a6,
      -75px  125px 0 40px #76bdd1,
     -150px    0px 0 40px #6cce74;
  }
  100% {
    -webkit-transform:rotate(-360deg);
    box-shadow:
      -75px -125px 0 40px #6cce74,
       75px -125px 0 40px #c18d46,
      150px    0px 0 40px #c14745,
       75px  125px 0 40px #2e1e5b,
      -75px  125px 0 40px #9c37a6,
     -150px    0px 0 40px #76bdd1;
  }
}

但是，我需要放置图像，而不是这个可爱的彩色“p”。我必须改变什么？ 我不知道该怎么做... 没有js怎么办？

提前谢谢你。

Answer 1

你想要这样的东西吗？

/**
 * Apply a class to each child
 * Required for IE8-
 */
$('.circle-container').children().each(function() {
  $(this).addClass('item'+($(this).index() + 1));
});

.circle-container {
  position: relative;
  /* [1] */
  width: 20em;
  height: 20em;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  /* [2] */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  /* [3] */
  margin: 5em auto 0;
  border: solid 5px tomato;
}
.circle-container > * {
  /* [4] */
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6em;
  height: 6em;
  margin: -3em;
}
.circle-container > *:nth-of-type(1) {
  -moz-transform: rotate(0deg) translate(10em) rotate(-0deg);
  -ms-transform: rotate(0deg) translate(10em) rotate(-0deg);
  -webkit-transform: rotate(0deg) translate(10em) rotate(-0deg);
  transform: rotate(0deg) translate(10em) rotate(-0deg);
}
.circle-container > *:nth-of-type(2) {
  -moz-transform: rotate(45deg) translate(10em) rotate(-45deg);
  -ms-transform: rotate(45deg) translate(10em) rotate(-45deg);
  -webkit-transform: rotate(45deg) translate(10em) rotate(-45deg);
  transform: rotate(45deg) translate(10em) rotate(-45deg);
}
.circle-container > *:nth-of-type(3) {
  -moz-transform: rotate(90deg) translate(10em) rotate(-90deg);
  -ms-transform: rotate(90deg) translate(10em) rotate(-90deg);
  -webkit-transform: rotate(90deg) translate(10em) rotate(-90deg);
  transform: rotate(90deg) translate(10em) rotate(-90deg);
}
.circle-container > *:nth-of-type(4) {
  -moz-transform: rotate(135deg) translate(10em) rotate(-135deg);
  -ms-transform: rotate(135deg) translate(10em) rotate(-135deg);
  -webkit-transform: rotate(135deg) translate(10em) rotate(-135deg);
  transform: rotate(135deg) translate(10em) rotate(-135deg);
}
.circle-container > *:nth-of-type(5) {
  -moz-transform: rotate(180deg) translate(10em) rotate(-180deg);
  -ms-transform: rotate(180deg) translate(10em) rotate(-180deg);
  -webkit-transform: rotate(180deg) translate(10em) rotate(-180deg);
  transform: rotate(180deg) translate(10em) rotate(-180deg);
}
.circle-container > *:nth-of-type(6) {
  -moz-transform: rotate(225deg) translate(10em) rotate(-225deg);
  -ms-transform: rotate(225deg) translate(10em) rotate(-225deg);
  -webkit-transform: rotate(225deg) translate(10em) rotate(-225deg);
  transform: rotate(225deg) translate(10em) rotate(-225deg);
}
.circle-container > *:nth-of-type(7) {
  -moz-transform: rotate(270deg) translate(10em) rotate(-270deg);
  -ms-transform: rotate(270deg) translate(10em) rotate(-270deg);
  -webkit-transform: rotate(270deg) translate(10em) rotate(-270deg);
  transform: rotate(270deg) translate(10em) rotate(-270deg);
}
.circle-container > *:nth-of-type(8) {
  -moz-transform: rotate(315deg) translate(10em) rotate(-315deg);
  -ms-transform: rotate(315deg) translate(10em) rotate(-315deg);
  -webkit-transform: rotate(315deg) translate(10em) rotate(-315deg);
  transform: rotate(315deg) translate(10em) rotate(-315deg);
}
.circle-container a {
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 5px tomato;
}
.circle-container img {
  display: block;
  width: 100%;
  border-radius: 50%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.circle-container img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.circle-container .item1 {
  animation-delay: 0s;
}

.circle-container .item2 {
  animation-delay: .5s;
}

.circle-container .item3 {
  animation-delay: 1s;
}

.circle-container .item4 {
  animation-delay: 1.5s;
}

.circle-container .item5 {
  animation-delay: 2s;
}

.circle-container .item6 {
  animation-delay: 2.5s;
}

.circle-container .item7 {
  animation-delay: 3s;
}

.circle-container .item8 {
  animation-delay: 3.5s;
}

.circle-container li {
  -webkit-animation: myOrbit 4s linear infinite;
  /* Chrome, Safari 5 */
  -moz-animation: myOrbit 4s linear infinite;
  /* Firefox 5-15 */
  -o-animation: myOrbit 4s linear infinite;
  /* Opera 12+ */
  animation: myOrbit 4s linear infinite;
  /* Chrome, Firefox 16+, 
     IE 10+, Safari 5 */
}

@-webkit-keyframes myOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}
@-moz-keyframes myOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}
@-o-keyframes myOrbit {
  from {
    -o-transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}
@keyframes myOrbit {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class='circle-container'>
  <li><a href='#'><img src='http://lorempixel.com/100/100/city'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/nature'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/abstract'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/cats'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/food'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/animals'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/business'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/people'></a></li>
</ul>