How to realize loading Animation effect with CSS
This article mainly introduces CSS how to achieve loading animation related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this CSS how to achieve loading animation effect article will have a harvest, let's take a look at it.
Preview
Code
Keyframes custom Keyframe animation using CSS
Loading div#preload {margin: auto; position: fixed; width: 100%; height: 100%; background-color: # fff; z-index: 9999999} div#preload > img {position: absolute; top: 50%; left: 50%; transform: translate (- 50%);-webkit-transform: translate (- 50%) -moz-transform: translate (- 50% Lama 50%);-ms-transform: translate (- 50% last 50%)} div#preload. Cssload-loader {position: absolute; left: 0; margin: auto; width: 62px; height: 62px; top: 50%; margin-top:-31px; border-radius: 50% -o-border-radius: 50%;-ms-border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%; perspective: 780px} div#preload. Cssload-inner {position: absolute; width: 100%; height: 100%; box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box -moz-box-sizing: border-box; border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%} div#preload .cssload-inner.cssload-one {left: 0; top: 0; animation: cssload-rotate-one 1.15s linear infinite;-o-animation: cssload-rotate-one 1.15s linear infinite -ms-animation: cssload-rotate-one 1.15s linear infinite;-webkit-animation: cssload-rotate-one 1.15s linear infinite;-moz-animation: cssload-rotate-one 1.15s linear infinite; border-bottom: 3px solid # 000} div#preload .cssload-inner.cssload-two {right: 0; top: 0; animation: cssload-rotate-two 1.15s linear infinite;-o-animation: cssload-rotate-two 1.15s linear infinite -ms-animation: cssload-rotate-two 1.15s linear infinite;-webkit-animation: cssload-rotate-two 1.15s linear infinite;-moz-animation: cssload-rotate-two 1.15s linear infinite; border-right: 3px solid # 000} div#preload .cssload-inner.cssload-three {right: 0; bottom: 0; animation: cssload-rotate-three 1.15s linear infinite;-o-animation: cssload-rotate-three 1.15s linear infinite -ms-animation: cssload-rotate-three 1.15s linear infinite;-webkit-animation: cssload-rotate-three 1.15s linear infinite;-moz-animation: cssload-rotate-three 1.15s linear infinite Border-top: 3px solid # 000} @ keyframes cssload-rotate-one {0% {transform: rotateX (35deg) rotateY (- 45deg) rotateZ (0deg)} 100% {transform: rotateX (35deg) rotateY (- 45deg) rotateZ (360deg)} @-o-keyframes cssload-rotate-one {0% {- o-transform: rotateX (35deg) rotateY (- 45deg) rotateZ (0deg)} 100% {- o-transform: rotateX (35deg) rotateY (- 45deg) rotateZ (360deg)} @-ms-keyframes cssload-rotate-one {0% {- ms-transform: rotateX (35deg) rotateY (- 45deg) rotateZ (0deg)} 100% {- ms-transform: rotateX (35deg) rotateY (- 45deg) rotateZ (360deg)} @-webkit-keyframes cssload-rotate-one {0% {- webkit-transform: rotateX (35deg) rotateY (- 45deg) rotateZ (0deg)} 100% {- webkit-transform: rotateX (35deg) rotateY (- 45deg) rotateZ (360deg)} @-moz-keyframes cssload-rotate-one {0% {- moz-transform: rotateX (35deg) rotateY (- 45deg) rotateZ (0deg)} 100% {- moz-transform: rotateX (35deg) rotateY (- 45deg) rotateZ (360deg)} @ keyframes cssload-rotate-two {0% {transform: rotateX (50deg) rotateY (10deg) rotateZ (0deg)} {transform: rotateX (50deg) rotateY (10deg) rotateZ (360deg)} @-o-keyframes cssload-rotate-two {0% {- o-transform: rotateX (50deg) rotateY (10deg) rotateZ (0deg)} 100% {- o-transform: rotateX (50deg) rotateY (10deg) rotateZ (360deg)} @-ms-keyframes cssload-rotate-two {0% {- ms-transform: rotateX (50deg) rotateY (10deg) rotateZ (0deg)} 100% {- ms-transform: rotateX (50deg) rotateY (10deg) rotateZ (360deg)} @-webkit-keyframes cssload-rotate-two {0% { Webkit-transform: rotateX (50deg) rotateY (10deg) rotateZ (0deg)} 100% {- webkit-transform: rotateX (50deg) rotateY (10deg) rotateZ (360deg)} @-moz-keyframes cssload-rotate-two {0% {- moz-transform: rotateX (50deg) rotateY (10deg) rotateZ (0deg)} 100% {- moz-transform: rotateX (50deg) rotateY (10deg) rotateZ (360deg) @ keyframes cssload-rotate-three {0% {transform: rotateX (35deg) rotateY (55deg) rotateZ (0deg)} 100% {transform: rotateX (35deg) rotateY (55deg) rotateZ (360deg)} @-o-keyframes cssload-rotate-three {0% {- o-transform: rotateX (35deg) rotateY (55deg) rotateZ (0deg)} 100% {- o- Transform: rotateX (35deg) rotateY (55deg) rotateZ (360deg)} @-ms-keyframes cssload-rotate-three {0% {- ms-transform: rotateX (35deg) rotateY (55deg) rotateZ (0deg)} 100% {- ms-transform: rotateX (35deg) rotateY (55deg) rotateZ (360deg)} @-webkit-keyframes cssload-rotate-three {0% {- webkit-transform: rotateX (35deg) RotateY (55deg) rotateZ (0deg)} 100% {- webkit-transform: rotateX (35deg) rotateY (55deg) rotateZ (360deg)} @-moz-keyframes cssload-rotate-three {0% {- moz-transform: rotateX (35deg) rotateY (55deg) rotateZ (0deg)} 100% {- moz-transform: rotateX (35deg) rotateY (55deg) rotateZ (360deg) This is the end of the article on "how to achieve loading animation with CSS". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "CSS how to achieve loading animation effects". If you want to learn more knowledge, you are welcome to follow the industry information channel.
