CSS前端开发的动画实例_loading动画

如何前端开发调试|前端开发难就业|前端开发小工具

1.第一种
html 代码

<!DOCTYPE html>
<head>
<title>前端开发的女生:loading</title>
<style type=”text/css”>
.loadingTip{
position:fixed;
top:50%;
left:50%;
-webkit-transform:translate3d(-50%,-50%,0);
z-index:10001;
}
.loadingTipdiv{
background-color:#000;
width:15px;
height:15px;
border-radius:100%;
margin:2px;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
position:absolute;
}
@-webkit-keyframesloading{
50% {
opacity:0.3;
-webkit-transform:scale(0.4);
transform:scale(0.4);
}
100% {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1);
}
}
.loadingTip>div:nth-child(1){
top:25px;
left:0;
-webkit-animation: loading 1s0sinfinitelinear;
animation: loading 1s0sinfinitelinear;
}
.loadingTip>div:nth-child(2){
top:17.04545px;
left:17.04545px;
-webkit-animation: loading 1s0.12sinfinitelinear;
animation: loading 1s0.12sinfinitelinear;
}
.loadingTip>div:nth-child(3){
top:0;
left:25px;
-webkit-animation: loading 1s0.24sinfinitelinear;
animation: loading 1s0.24sinfinitelinear;
}
.loadingTip>div:nth-child(4){
top:-17.04545px;
left:17.04545px;
-webkit-animation: loading 1s0.36sinfinitelinear;
animation: loading 1s0.36sinfinitelinear;
}
.loadingTip>div:nth-child(5){
top:-25px;
left:0;
-webkit-animation: loading 1s0.48sinfinitelinear;
animation: loading 1s0.48sinfinitelinear;
}
.loadingTip>div:nth-child(6){
top:-17.04545px;
left:-17.04545px;
-webkit-animation: loading 1s0.6sinfinitelinear;
animation: loading 1s0.6sinfinitelinear;
}
.loadingTip>div:nth-child(7){
top:0;
left:-25px;
-webkit-animation: loading 1s0.72sinfinitelinear;
animation: loading 1s0.72sinfinitelinear;
}
.loadingTip>div:nth-child(8){
top:17.04545px;
left:-17.04545px;
-webkit-animation: loading 1s0.84sinfinitelinear;
animation: loading 1s0.84sinfinitelinear;
}
</style>
</head>
<body>
<divclass=”loadingTip”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

2.第二种
html 代码

<!DOCTYPE html>
<head>
<metacharset=”UTF-8″>
<title>web前端开发和安卓开发区别:loading</title>
<style type=”text/css”>
.loading{
position:fixed;
top:50%;
left:50%;
-webkit-transform:translate3d(-50%,-50%,0);
z-index:10001;
}
.loading>div{
background-color:#0091ff;
width:15px;
height:15px;
border-radius:100%;
margin:2px;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
display:inline-block;
}
.loading>div:nth-child(1){
-webkit-animation: scale 0.75s0.12sinfinitecubic-bezier(.2,.68,.18,1.08);
animation: scale 0.75s0.12sinfinitecubic-bezier(.2,.68,.18,1.08);
}
.loading>div:nth-child(2){
-webkit-animation: scale 0.75s0.24sinfinitecubic-bezier(.2,.68,.18,1.08);
animation: scale 0.75s0.24sinfinitecubic-bezier(.2,.68,.18,1.08);
}
.loading>div:nth-child(3){
-webkit-animation: scale 0.75s0.36sinfinitecubic-bezier(.2,.68,.18,1.08);
animation: scale 0.75s0.36sinfinitecubic-bezier(.2,.68,.18,1.08);
}
@-webkit-keyframesscale{
0% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
}
45% {
-webkit-transform:scale(0.1);
transform:scale(0.1);
opacity:0.7;
}
80% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
}
}
</style>
</head>
<body>
<divclass=”loading”>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

3.第3种
html 代码

<!DOCTYPE html>
<html>
<head>
<metacharset=”utf-8″>
<title>前端css开发实例:loading</title>
<style type=”text/css”>
.box{
width:100px;
height:100px;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
animation: boxRotate 2.2slinearinfinite;
}
.circle{
width:40px;
height:40px;
position:absolute;
border-radius:50%;
margin:auto;
}
.circle1{
top:0;
left:0;
right:0;
background-color:red;
animation: circleY 2.2slinearinfinite;
}
.circle2{
right:0;
top:0;
bottom:0;
background-color:yellow;
animation: circleX 2.2slinearinfinite;
}
.circle3{
left:0;
bottom:0;
right:0;
background-color:blue;
animation: circleY 2.2slinearinfinite;
}
.circle4{
left:0;
bottom:0;
top:0;
background-color:green;
animation: circleX 2.2slinearinfinite;
}
@keyframesboxRotate{
0% {
transform:rotate(0deg);
}
60% {
width:40px;
height:40px;
}
100% {
transform:rotate(360deg);
width:100px;
height:100px;
}
}
@keyframescircleX{
60% {
opacity:0.1;
/*transform: rotateY(0deg);*/
width:40px;
}
70% {
opacity:1;
width:0;
/*transform: rotateY(180deg);*/
}
}
@keyframescircleY{
60% {
opacity:0.1;
height:40px;
}
70% {
opacity:1;
height:0;
}
}
</style>
</head>
<body>
<divclass=”box”>
<divclass=”circle circle1″></div>
<divclass=”circle circle2″></div>
<divclass=”circle circle3″></div>
<divclass=”circle circle4″></div>
</div>
</body>
</html>
前端开发找工作群|前端开发工作的展开|大专前端开发女生学
» 本文来自:前端开发者 » 《CSS前端开发的动画实例_loading动画》
» 本文链接地址:https://www.rokub.com/3731.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!