Shulou(Shulou.com)06/01 Report--

Today Xiaobian to share with you how to use CSS3 to achieve awesome Loading animation effects of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

one

HTML Code:

The code is as follows:

CSS Code:

The code is as follows:

.spinner {

Margin: 100px auto

Width: 50px

Height: 60px

Text-align: center

Font-size: 10px

}

.spinner > div {

Background-color: # 67CF22

Height: 100%

Width: 6px

Display: inline-block

-webkit-animation: stretchdelay 1.2s infinite ease-in-out

Animation: stretchdelay 1.2s infinite ease-in-out

}

.spinner .rect2 {

-webkit-animation-delay:-1.1s

Animation-delay:-1.1s

}

.spinner .rect3 {

-webkit-animation-delay:-1.0s

Animation-delay:-1.0s

}

.spinner .rect4 {

-webkit-animation-delay:-0.9s

Animation-delay:-0.9s

}

.spinner .rect5 {

-webkit-animation-delay:-0.8s

Animation-delay:-0.8s

}

@-webkit-keyframes stretchdelay {

0%, 40%, 100% {- webkit-transform: scaleY (0.4)}

20% {- webkit-transform: scaleY (1.0)}

}

@ keyframes stretchdelay {

0%, 40%, 100% {

Transform: scaleY (0.4)

-webkit-transform: scaleY (0.4)

} 20% {

Transform: scaleY (1.0)

-webkit-transform: scaleY (1.0)

}

}

two

HTML Code:

The code is as follows:

CSS Code:

The code is as follows:

.spinner {

Width: 60px

Height: 60px

Background-color: # 67CF22

Margin: 100px auto

-webkit-animation: rotateplane 1.2s infinite ease-in-out

Animation: rotateplane 1.2s infinite ease-in-out

}

@-webkit-keyframes rotateplane {

0% {- webkit-transform: perspective (120px)}

50% {- webkit-transform: perspective (120px) rotateY (180deg)}

100% {- webkit-transform: perspective (120px) rotateY (180deg) rotateX (180deg)}

}

@ keyframes rotateplane {

0% {

Transform: perspective (120px) rotateX (0deg) rotateY (0deg)

-webkit-transform: perspective (120px) rotateX (0deg) rotateY (0deg)

} 50% {

Transform: perspective (120px) rotateX (- 180.1deg) rotateY (0deg)

-webkit-transform: perspective (120px) rotateX (- 180.1deg) rotateY (0deg)

} 100% {

Transform: perspective (120px) rotateX (- 180deg) rotateY (- 179.9deg)

-webkit-transform: perspective (120px) rotateX (- 180deg) rotateY (- 179.9deg)

}

}

three

HTML Code:

The code is as follows:

CSS Code:

The code is as follows:

.spinner {

Width: 60px

Height: 60px

Position: relative

Margin: 100px auto

}

.double-bounce1, .double-bounce2 {

Width: 100%

Height: 100%

Border-radius: 50%

Background-color: # 67CF22

Opacity: 0.6

Position: absolute

Top: 0

Left: 0

-webkit-animation: bounce 2.0 s infinite ease-in-out

Animation: bounce 2.0s infinite ease-in-out

}

. double-bounce2 {

-webkit-animation-delay:-1.0s

Animation-delay:-1.0s

}

@-webkit-keyframes bounce {

0%, 100% {- webkit-transform: scale (0.0)}

50% {- webkit-transform: scale (1.0)}

}

@ keyframes bounce {

0%, 100% {

Transform: scale (0.0)

-webkit-transform: scale (0.0)

} 50% {

Transform: scale (1.0)

-webkit-transform: scale (1.0)

}

}

four

HTML Code:

The code is as follows:

CSS Code:

The code is as follows:

.spinner {

Margin: 100px auto

Width: 32px

Height: 32px

Position: relative

}

.cube1, .cube2 {

Background-color: # 67CF22

Width: 30px

Height: 30px

Position: absolute

Top: 0

Left: 0

-webkit-animation: cubemove 1.8s infinite ease-in-out

Animation: cubemove 1.8s infinite ease-in-out

}

.cube2 {

-webkit-animation-delay:-0.9s

Animation-delay:-0.9s

}

@-webkit-keyframes cubemove {

25% {- webkit-transform: translateX (42px) rotate (- 90deg) scale

50% {- webkit-transform: translateX (42px) translateY (42px) rotate (- 180deg)}

75% {- webkit-transform: translateX (0px) translateY (42px) rotate (- 270deg) scale

100% {- webkit-transform: rotate (- 360deg)}

}

@ keyframes cubemove {

25% {

Transform: translateX (42px) rotate (- 90deg) scale

-webkit-transform: translateX (42px) rotate (- 90deg) scale (0.5)

} 50% {

Transform: translateX (42px) translateY (42px) rotate (- 179deg)

-webkit-transform: translateX (42px) translateY (42px) rotate (- 179deg)

} 50.1% {

Transform: translateX (42px) translateY (42px) rotate (- 180deg)

-webkit-transform: translateX (42px) translateY (42px) rotate (- 180deg)

} 75% {

Transform: translateX (0px) translateY (42px) rotate (- 270deg) scale

-webkit-transform: translateX (0px) translateY (42px) rotate (- 270deg) scale

} 100% {

Transform: rotate (- 360deg)

-webkit-transform: rotate (- 360deg)

}

}

five

HTML Code:

The code is as follows:

CSS Code:

The code is as follows:

.spinner {

Margin: 100px auto

Width: 90px

Height: 90px

Position: relative

Text-align: center

-webkit-animation: rotate 2.0 s infinite linear

Animation: rotate 2.0s infinite linear

}

.dot1, .dot2 {

Width: 60%

Height: 60%

Display: inline-block

Position: absolute

Top: 0

Background-color: # 67CF22

Border-radius: 100%

-webkit-animation: bounce 2.0 s infinite ease-in-out

Animation: bounce 2.0s infinite ease-in-out

}

.dot2 {

Top: auto

Bottom: 0px

-webkit-animation-delay:-1.0s

Animation-delay:-1.0s

}

@-webkit-keyframes rotate {100% {- webkit-transform: rotate (360deg)}}

@ keyframes rotate {100% {transform: rotate (360deg);-webkit-transform: rotate (360deg)}}

@-webkit-keyframes bounce {

0%, 100% {- webkit-transform: scale (0.0)}

50% {- webkit-transform: scale (1.0)}

}

@ keyframes bounce {

0%, 100% {

Transform: scale (0.0)

-webkit-transform: scale (0.0)

} 50% {

Transform: scale (1.0)

-webkit-transform: scale (1.0)

}

}

six

HTML Code:

The code is as follows:

CSS Code:

The code is as follows:

.spinner {

Margin: 100px auto 0

Width: 150px

Text-align: center

}

.spinner > div {

Width: 30px

Height: 30px

Background-color: # 67CF22

Border-radius: 100%

Display: inline-block

-webkit-animation: bouncedelay 1.4s infinite ease-in-out

Animation: bouncedelay 1.4s infinite ease-in-out

/ * Prevent first frame from flickering when animation starts * /

-webkit-animation-fill-mode: both

Animation-fill-mode: both

}

.spinner .bounce1 {

-webkit-animation-delay:-0.32s

Animation-delay:-0.32s

}

.spinner .bounce2 {

-webkit-animation-delay:-0.16s

Animation-delay:-0.16s

}

@-webkit-keyframes bouncedelay {

0%, 80%, 100% {- webkit-transform: scale (0.0)}

40% {- webkit-transform: scale (1.0)}

}

@ keyframes bouncedelay {

0%, 80%, 100% {

Transform: scale (0.0)

-webkit-transform: scale (0.0)

} 40% {

Transform: scale (1.0)

-webkit-transform: scale (1.0)

}

}

seven

HTML Code:

The code is as follows:

CSS Code:

The code is as follows:

.spinner {

Width: 40px

Height: 40px

Margin: 100px auto

Background-color: # 333

Border-radius: 100%

-webkit-animation: scaleout 1.0s infinite ease-in-out

Animation: scaleout 1.0s infinite ease-in-out

}

@-webkit-keyframes scaleout {

0% {- webkit-transform: scale (0.0)}

100% {

-webkit-transform: scale (1.0)

Opacity: 0

}

}

@ keyframes scaleout {

0% {

Transform: scale (0.0)

-webkit-transform: scale (0.0)

} 100% {

Transform: scale (1.0)

-webkit-transform: scale (1.0)

Opacity: 0

}

}

eight

HTML Code:

The code is as follows:

CSS Code:

The code is as follows:

.spinner {

Margin: 100px auto

Width: 20px

Height: 20px

Position: relative

}

.container1 > div, .container2 > div, .container3 > div {

Width: 6px

Height: 6px

Background-color: # 333

Border-radius: 100%

Position: absolute

-webkit-animation: bouncedelay 1.2s infinite ease-in-out

Animation: bouncedelay 1.2s infinite ease-in-out

-webkit-animation-fill-mode: both

Animation-fill-mode: both

}

.spinner. Spinner-container {

Position: absolute

Width: 100%

Height: 100%

}

.container2 {

-webkit-transform: rotateZ (45deg)

Transform: rotateZ (45deg)

}

.container3 {

-webkit-transform: rotateZ (90deg)

Transform: rotateZ (90deg)

}

.circle1 {top: 0; left: 0;}

.circle2 {top: 0; right: 0;}

.circle3 {right: 0; bottom: 0;}

.circle4 {left: 0; bottom: 0;}

.container2 .circle1 {

-webkit-animation-delay:-1.1s

Animation-delay:-1.1s

}

.container3 .circle1 {

-webkit-animation-delay:-1.0s

Animation-delay:-1.0s

}

.container1 .circle2 {

-webkit-animation-delay:-0.9s

Animation-delay:-0.9s

}

.container2 .circle2 {

-webkit-animation-delay:-0.8s

Animation-delay:-0.8s

}

.container3 .circle2 {

-webkit-animation-delay:-0.7s

Animation-delay:-0.7s

}

.container1 .circle3 {

-webkit-animation-delay:-0.6s

Animation-delay:-0.6s

}

.container2 .circle3 {

-webkit-animation-delay:-0.5s

Animation-delay:-0.5s

}

.container3 .circle3 {

-webkit-animation-delay:-0.4s

Animation-delay:-0.4s

}

.container1 .circle4 {

-webkit-animation-delay:-0.3s

Animation-delay:-0.3s

}

.container2 .circle4 {

-webkit-animation-delay:-0.2s

Animation-delay:-0.2s

}

.container3 .circle4 {

-webkit-animation-delay:-0.1s

Animation-delay:-0.1s

}

@-webkit-keyframes bouncedelay {

0%, 80%, 100% {- webkit-transform: scale (0.0)}

40% {- webkit-transform: scale (1.0)}

}

@ keyframes bouncedelay {

0%, 80%, 100% {

Transform: scale (0.0)

-webkit-transform: scale (0.0)

} 40% {

Transform: scale (1.0)

-webkit-transform: scale (1.0)

}

}

These are all the contents of the article "how to use CSS3 to achieve awesome Loading animation effects". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.