html滚动图片中的圆点,HTML5 圆点加载动画 - 弹跳/滑动/压缩

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Varela+Round);

html,

body {

height: 100%;

width: 100%;

}

body {

background: -webkit-radial-gradient(circle, #22133a, #181818);

font-family: 'Varela Round', sans-serif;

}

#container {

height: 40px;

}

.wrapper {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.title {

position: absolute;

top: -160px;

left: 50%;

transform: translate(-50%, -50%);

width: 100%;

width: 540px;

text-align: center;

}

.title h1 {

color: #65b987;

font-size: 34px;

font-weight: bold;

width: 100%;

}

.dot {

height: 20px;

width: 20px;

margin: 0 2px;

border-radius: 100%;

display: inline-block;

background-color: whitesmoke;

opacity: 0.5;

}

.bounce .one {

animation: dotJump 3.5s ease;

animation-delay: 0;

}

.bounce .two {

animation: dotJump 3.5s ease;

animation-delay: 2500ms;

}

.bounce .three {

animation: dotJump 3.5s ease;

animation-delay: 5000ms;

}

.bounce .four {

animation: dotJump 3.5s ease;

animation-delay: 7500ms;

}

.bounce .five {

animation: dotJump 3.5s ease;

animation-delay: 10000ms;

}

.condense .one {

animation: condense1 2.5s ease-out;

animation-delay: 0;

transform-origin: center center;

}

.condense .five {

animation: condense5 2.5s ease;

animation-delay: 350ms;

transform-origin: center center;

}

.condense .two {

animation: condense2 2.5s ease;

animation-delay: 700ms;

transform-origin: center center;

}

.condense .four {

animation: condense4 2.5s ease;

animation-delay: 1050ms;

transform-origin: center center;

}

.slide .one {

animation: slide1 2.5s ease-out infinite;

animation-delay: 0;

transform-origin: center center;

animation-direction: alternate;

}

.slide .two {

animation: slide2 2.5s ease infinite;

animation-delay: 350ms;

transform-origin: center center;

animation-direction: alternate;

}

.slide .three {

animation: slide3 2.5s ease infinite;

animation-delay: 700ms;

transform-origin: center center;

animation-direction: alternate;

}

.slide .four {

animation: slide4 2.5s ease infinite;

animation-delay: 1050ms;

transform-origin: center center;

animation-direction: alternate;

}

.button-row {

margin-top: 140px;

position: absolute;

left: -7.5px;

}

.bounce-btn {

padding: 15px 25px;

color: whitesmoke;

border-radius: 5px;

display: inline-block;

background-color: #65b987;

box-shadow: 0 8px 0 0 #419061;

position: absolute;

font-size: 20px;

font-weight: bold;

transition: all 0.35s ease;

text-align: center;

width: 100px;

cursor: pointer;

left: -190px;

}

.bounce-btn:hover {

box-shadow: 0 6px 0 0 #326d4a;

margin-top: 3.5px;

}

.slide-btn {

padding: 15px 25px;

color: whitesmoke;

border-radius: 5px;

display: inline-block;

background-color: #65b987;

box-shadow: 0 8px 0 0 #419061;

position: absolute;

font-size: 20px;

font-weight: bold;

transition: all 0.35s ease;

text-align: center;

width: 100px;

cursor: pointer;

}

.slide-btn:hover {

box-shadow: 0 6px 0 0 #326d4a;

margin-top: 3.5px;

}

.condense-btn {

padding: 15px 25px;

color: whitesmoke;

border-radius: 5px;

display: inline-block;

background-color: #65b987;

box-shadow: 0 8px 0 0 #419061;

position: absolute;

font-size: 20px;

font-weight: bold;

transition: all 0.35s ease;

text-align: center;

width: 100px;

cursor: pointer;

left: 190px;

}

.condense-btn:hover {

box-shadow: 0 6px 0 0 #326d4a;

margin-top: 3.5px;

}

.clicked {

box-shadow: 0 0 0 0 #326d4a;

margin-top: 8.5px;

background-color: #4da972;

}

.clicked:hover {

box-shadow: 0 0 0 0 #326d4a;

margin-top: 8.5px;

background-color: #4da972;

}

@keyframes dotJump {

10% {

transform: translateY(-30px);

opacity: 1;

}

25% {

transform: translateY(30px);

}

45% {

transform: translateY(-20px);

}

65% {

transform: translateY(10px);

opacity: 1;

}

80% {

transform: translateY(-5px);

}

100% {

transform: translateY(0);

}

}

@keyframes condense1 {

0%, 10%, 100% {

transform: translateX(0);

}

20% {

transform: translateX(56px);

}

80% {

transform: translateX(56px);

}

90% {

transform: translateX(0);

}

}

@keyframes condense5 {

0%, 10%, 100% {

transform: translateX(0);

}

20% {

transform: translateX(-56px);

}

80% {

transform: translateX(-56px);

}

90% {

transform: translateX(0);

}

}

@keyframes condense2 {

0%, 10%, 100% {

transform: translateX(0);

}

20% {

transform: translateX(28px);

}

80% {

transform: translateX(28px);

}

90% {

transform: translateX(0);

}

}

@keyframes condense4 {

0%, 10%, 100% {

transform: translateX(0);

}

20% {

transform: translateX(-28px);

}

80% {

transform: translateX(-28px);

}

90% {

transform: translateX(0);

}

}

@keyframes slide1 {

0%, 10%, 100% {

transform: translateX(0);

opacity: 0.2;

}

20% {

transform: translateX(113px);

opacity: 0.6;

}

80% {

transform: translateX(113px);

opacity: 0.6;

}

90% {

transform: translateX(0);

opacity: 0.2;

}

}

@keyframes slide2 {

0%, 10%, 100% {

transform: translateX(0);

opacity: 0.3;

}

20% {

transform: translateX(85px);

opacity: 0.6;

}

80% {

transform: translateX(85px);

opacity: 0.6;

}

90% {

transform: translateX(0);

opacity: 0.3;

}

}

@keyframes slide3 {

0%, 10%, 100% {

transform: translateX(0);

opacity: 0.4;

}

20% {

transform: translateX(57px);

opacity: 0.6;

}

80% {

transform: translateX(57px);

opacity: 0.6;

}

90% {

transform: translateX(0);

opacity: 0.4;

}

}

@keyframes slide4 {

0%, 10% {

transform: translateX(0);

opacity: 0.5;

}

20% {

transform: translateX(29px);

opacity: 0.6;

}

80% {

transform: translateX(29px);

opacity: 0.6;

}

90% {

transform: translateX(0);

opacity: 0.5;

}

}