简单html摩天轮动画效果,HTML5 摩天轮动画

CSS

语言：

CSSSCSS

确定

/* Rotation angle for the current item */

/* Angle between two items */

body {

background: white;

}

.point-group {

-webkit-animation: rotateGroup 5s linear 1.2s infinite;

animation: rotateGroup 5s linear 1.2s infinite;

border: 1px solid #000;

border-radius: 20em;

height: 40em;

left: 50%;

list-style: none;

margin: -20em 0 0 -20em;

padding: 0;

position: absolute;

top: 50%;

width: 40em;

}

.point-group.paused,

.point-group:hover {

-webkit-animation-play-state: paused;

animation-play-state: paused;

}

.point {

background: #000;

color: #fff;

border-radius: 2em;

font-family: Verdana;

font-weight: bold;

height: 4em;

left: 50%;

line-height: 4em;

margin: -2em 0 0 -2em;

position: absolute;

top: 50%;

text-align: center;

-webkit-transform-origin: center center;

-ms-transform-origin: center center;

transform-origin: center center;

-webkit-transition: -webkit-transform 0.6s ease-out;

tra