html 詹姆斯斯坦巴赫的CodePen。图八旋转动画 - 这个想法归功于LayerVault。喜欢这个效果在他们的主页上

Posted 2021-05-11

.eight-box {
	position: relative;
	display: block;
	margin: 1em auto;
	width: 16em;
	height: 24em;
  font-family: sans-serif;
  font-size: 20px;
}
.fig-8 {
	display: block;
	position: absolute;
	color: #fff;
	text-shadow: 0 0 2px #000;
	width: 2em;
	padding: .5em 0;
  text-align: center;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.col-1 {
	background: #1abc9c;
}
.col-2 {
	background: #9b59b6;
}
.col-3 {
	background: #27ae60;
}
.col-4 {
	background: #2c3e50;
}
.col-5 {
	background: #e74c3c;
}
.col-6 {
	background: #f39c12;
}
.col-7 {
	background: #bdc3c7;
}
.col-8 {
	background: #2ecc71;
}
.col-9 {
	background: #34495e;
}
.col-10 {
	background: #2980b9;
}
.col-11 {
	background: #f1c40f;
}
.col-12 {
	background: #d35400;
}
.col-13 {
	background: #7f8c8d;
}
.col-14 {
	background: #3498db;
}
.col-15 {
	background: #16a085;
}
.pos-1 {
	top: 0;
	left: 43.75%;
}
.pos-2 {
	top: 6.25%;
	left: 68.75%;
}
.pos-3 {
	top: 22.92%;
	left: 78.125%;
}
.pos-4 {
	top: 39.58%;
	left: 68.75%;
}
.pos-5 {
	top: 45.83%;
	left: 43.75%;
}
.pos-6 {
	top: 52.08%;
	left: 18.75%;
}
.pos-7 {
	top: 68.75%;
	left: 9.375%;
}
.pos-8 {
	top: 85.417%;
	left: 18.75%;
}
.pos-9 {
	top: 91.67%;
	left: 43.75%;
}
.pos-10 {
	top: 85.417%;
	left: 68.75%;
}
.pos-11 {
	top: 68.75%;
	left: 78.125%;
}
.pos-12 {
	top: 52.08%;
	left: 68.75%;
}
.pos-13 {
	top: 39.58%;
	left: 18.75%;
}
.pos-14 {
	top: 22.92%;
	left: 9.375%;
}
.pos-15 {
	top: 6.25%;
	left: 18.75%;
}
.smile {
  position: absolute;
  width: 2em;
  height: 1.4em;
  -webkit-transform: rotate(90deg);
  background: #c0392b;
  text-align: center;
  padding: .3em 0;
  border-radius: 50%;
  color: #fff;
}
.smile-1 {
  top: 22.92%;
  left: 43.75%;
}
.smile-2 {
  top: 68.75%;
  left: 43.75%;
}

var outerBox = $('.eight-box'),
    boxHeight = $(outerBox).height(),
    boxWidth = $(outerBox).width();
function changeNumbers() {
  var pos1 = $('.pos-1'),
      pos2 = $('.pos-2'),
      pos3 = $('.pos-3'),
      pos4 = $('.pos-4'),
      pos5 = $('.pos-5'),
      pos6 = $('.pos-6'),
      pos7 = $('.pos-7'),
      pos8 = $('.pos-8'),
      pos9 = $('.pos-9'),
      pos10 = $('.pos-10'),
      pos11 = $('.pos-11'),
      pos12 = $('.pos-12'),
      pos13 = $('.pos-13'),
      pos14 = $('.pos-14'),
      pos15 = $('.pos-15');
  $(pos1).addClass('pos-2');
  $(pos1).removeClass('pos-1');
  $(pos2).addClass('pos-3');
  $(pos2).removeClass('pos-2');
  $(pos3).addClass('pos-4');
  $(pos3).removeClass('pos-3');
  $(pos4).addClass('pos-5');
  $(pos4).removeClass('pos-4');
  $(pos5).addClass('pos-6');
  $(pos5).removeClass('pos-5');
  $(pos6).addClass('pos-7');
  $(pos6).removeClass('pos-6');
  $(pos7).addClass('pos-8');
  $(pos7).removeClass('pos-7');
  $(pos8).addClass('pos-9');
  $(pos8).removeClass('pos-8');
  $(pos9).addClass('pos-10');
  $(pos9).removeClass('pos-9');
  $(pos10).addClass('pos-11');
  $(pos10).removeClass('pos-10');
  $(pos11).addClass('pos-12');
  $(pos11).removeClass('pos-11');
  $(pos12).addClass('pos-13');
  $(pos12).removeClass('pos-12');
  $(pos13).addClass('pos-14');
  $(pos13).removeClass('pos-13');
  $(pos14).addClass('pos-15');
  $(pos14).removeClass('pos-14');
  $(pos15).addClass('pos-1');
  $(pos15).removeClass('pos-15');
};
var refreshId = setInterval(changeNumbers, 2000);

<div class="eight-box">
  <div class="fig-8 col-1 pos-1">1</div>
  <div class="fig-8 col-2 pos-2">2</div>
  <div class="fig-8 col-3 pos-3">3</div>
  <div class="fig-8 col-4 pos-4">4</div>
  <div class="fig-8 col-5 pos-5">5</div>
  <div class="fig-8 col-6 pos-6">6</div>
  <div class="fig-8 col-7 pos-7">7</div>
  <div class="fig-8 col-8 pos-8">8</div>
  <div class="fig-8 col-9 pos-9">9</div>
  <div class="fig-8 col-10 pos-10">10</div>
  <div class="fig-8 col-11 pos-11">11</div>
  <div class="fig-8 col-12 pos-12">12</div>
  <div class="fig-8 col-13 pos-13">13</div>
  <div class="fig-8 col-14 pos-14">14</div>
  <div class="fig-8 col-15 pos-15">15</div>
  <div class="smile smile-1">:)</div>
  <div class="smile smile-2">:)</div>
</div>