纯css动画

效果图:

实现方法

1.共三步(总共三个文件)

一.创建index.html添加如下代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>loading...</title>
	<link href="css/bick.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/loading.css">
 </head>
 <body>
  <div class="page">
		<div class="loading">
			<div class="slider">
				<div class="bike bikeAni"></div>
			</div>
		</div>
	</div>
 </body>
</html>

二.创建 loading.css 添加如下代码

body,div,span{
	border:0px;
	padding:0px;
	margin:0px;
}
body{
	background: url(../images/espaco.jpg) no-repeat 0 0;
	background-size: 100%; /* 背景图片被拉伸为全屏 */
}
.page{
	width:100vw;
	height:100vh;
	/* background:#333; */
}
.loading{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	transition-property:all;
	transition-duration:1s;
}
.loading{
	width:400px;
	height:400px;
	border-radius:50%;
	background: url(../images/terra.jpg) repeat-x 0 0;
	border: 1px solid rgba(26,18,101,0.3); 
	box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
	transition-property: all;
	transition-duration: 1s;
	transform: rotate(0deg);
	transform-origin: 35px 270px;
	animation: loop 20s linear infinite; 
}
@keyframes loop {
	0%{ background-position: 0 0; }
	100%{ background-position: -900px 0;} 
} 
.loading:before{
    content: "";
    border-radius: 50%; 
    box-shadow: -83px -4px 53px rgba(0,0,0,0.7) inset;/*弧形阴影，形成白天黑夜效果*/
    position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;

}
@keyframes cyclingCC{
	0%{transform:rotate(0)}
	100%{transform:rotate(360deg)}
}
.slider{
	 width: 70px;
    height: 70px;
    transition-property: all;
    transition-duration: 1s;
    transform: rotate(0deg);
    transform-origin: 35px 270px;
    position: absolute;
    top: -70px;
    left: 165px;
	animation:cyclingCC 3s infinite ;
	animation-timing-function:linear;
}
.bike{
    width: 70px;
    height: 70px;
    transition-property: all;
    transition-duration: 1s;
    transform: rotate(0deg);
    transform-origin: 35px 270px;
	background:url(../images/bike70.png);
	background-position:0px 0px;
}

三.创建bick.css文件添加如下代码

.saicheng_fixed{position:fixed;top:50px;z-index:999}
.saicheng_fixed tbody{padding-top:10px;padding-right:2px;width:950px;display:block;background:#fff;z-index:999}
.saishi_wrapper .nph_scrl_wrap{background:#fc0;padding-bottom:10px}
.yilibottombanner{position:absolute;bottom:230px;left:50%;display:block;width:1200px;height:auto;margin-left:-600px}
.yilibottombanner img{width:100%;height:auto}
.rio{width:126px;height:35px;background:url(../images/rio.png);position:absolute;top:48px;left:50%;margin-left:-413px;transform-origin:left bottom}
.star{width:19px;height:13px;background:url(../images/star.png);position:absolute;top:32px;left:50%;margin-left:-300px;transform-origin:left bottom}

@keyframes scaleUp{
	0%{transform:scale(1,1);-webkit-transform:scale(1,1)}
	50%{transform:scale(1,1);-webkit-transform:scale(1,1)}
	51%{transform:scale(0,0);-webkit-transform:scale(0,0)}
	77%{transform:scale(1,1);-webkit-transform:scale(1,1)}
	88%{transform:scale(.97,.97);-webkit-transform:scale(.97,.97)}
	100%{transform:scale(1,1);-webkit-transform:scale(1,1)}
}

@-webkit-keyframes scaleUp{
	0%{-webkit-transform:scale(1,1);transform:scale(1,1)}
	50%{-webkit-transform:scale(1,1);transform:scale(1,1)}
	51%{-webkit-transform:scale(0,0);transform:scale(0,0)}
	77%{-webkit-transform:scale(1,1);transform:scale(1,1)}
	88%{-webkit-transform:scale(.97,.97);transform:scale(.97,.97)}
	100%{-webkit-transform:scale(1,1);transform:scale(1,1)}
}

.scaleUp{
	-webkit-animation:scaleUp 1.04s;
	animation:scaleUp 1.04s
}

@keyframes rotate{
	0%{transform:rotate(0);-webkit-transform:rotate(0)}
	59%{transform:rotate(0);-webkit-transform:rotate(0)}
	71%{transform:rotate(24deg);-webkit-transform:rotate(24deg)}
	88%{transform:rotate(-24deg);-webkit-transform:rotate(-24deg)}
	100%{transform:rotate(0);-webkit-transform:rotate(0)}
}
	
@-webkit-keyframes rotate{
	0%{-webkit-transform:rotate(0);transform:rotate(0)}
	59%{-webkit-transform:rotate(0);transform:rotate(0)}
	71%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}
	88%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}
	100%{-webkit-transform:rotate(0);transform:rotate(0)}
}
	
.rotate{-webkit-animation:rotate 1.32s;animation:rotate 1.32s}

.bikeAni{-webkit-animation:bikeAni 7s steps(99) infinite;animation:bikeAni 7s steps(99) infinite}

@keyframes bikeAni{
	0%{background-position:0 9999989px}
	99%{background-position:0 0}
}

以上已经完成这个效果了

提供整压缩包下载 github 上:css run bick

猜你喜欢