本篇内容介绍了“CSS代码怎么实现loading动画效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
效果：
代码
使用了CSS的keyframes自定义关键帧动画
<!DOCTYPE html>
<html lang="en">
<head>
<title>Loading</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%)
}
div#preload .cssload-loader {
position: absolute;
left: 0;
right: 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)
}
100% {
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)
}
}
</style>
</head>
<body>
<div id="preload">
<div class="cssload-loader">
<div class="cssload-inner cssload-one"></div>
<div class="cssload-inner cssload-two"></div>
<div class="cssload-inner cssload-three"></div>
</div>
</div>
</body>
</html>1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""。
2.内嵌样式，就是将CSS代码写在之间，并且用进行声明。
3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上就可以了。其次就是导入样式，导入样式和链接样式比较相似，采用@import样式导入CSS样式表，不建议使用。
“CSS代码怎么实现loading动画效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
