<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<style>
* {
padding: 0;
margin: 0
}
.mobileItem {
animation-duration: 3s;
animation-delay: .2s;
animation-iteration-count: infinite;
}
#change {
width: 600px;
height: 600px;
border-radius: 100%;
background: url("./ab.png") no-repeat center;
background-size: contain;
position: absolute;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
z-index: 1;
-webkit-animation: change 20s linear infinite;
}
#change2 {
width: 520px;
height: 520px;
border-radius: 100%;
background: url("./ab.png") no-repeat center;
background-size: contain;
position: absolute;
left: 50%;
top: 50%;
margin-left: -260px;
margin-top: -260px;
z-index: 2;
-webkit-animation: change1 23s linear infinite;
}
#change3 {
width: 440px;
height: 440px;
border-radius: 100%;
background: url("./ab.png") no-repeat center;
background-size: contain;
position: absolute;
left: 50%;
top: 50%;
margin-left: -220px;
margin-top: -220px;
z-index: 2;
-webkit-animation: change 13s linear infinite;
}
#change4 {
width: 360px;
height: 360px;
border-radius: 100%;
background: url("./ab.png") no-repeat center;
background-size: contain;
position: absolute;
left: 50%;
top: 50%;
margin-left: -180px;
margin-top: -180px;
z-index: 2;
-webkit-animation: change1 11s linear infinite;
}
#change5 {
width: 360px;
height: 360px;
border-radius: 100%;
text-align: center;
line-height: 360px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -180px;
margin-top: -180px;
z-index: 2;
}
.con {
width: 600px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
}
@-webkit-keyframes change {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes change1 {
0% {
-webkit-transform: rotate(360deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script>
// function resizing() {
// var num = window.innerWidth;
// var font = num / 10;
// document.getElementsByTagName(‘html‘)[0].style.fontSize = font + ‘px‘
// }
// resizing();
// window.onresize = function () {
// resizing()
// }
</script>
</head>
<body>
<div class="con">
<div id="change"></div>
<div id="change2"></div>
<div id="change3"></div>
<div id="change4"></div>
<div id="change5">行业拓展部</div>
</div>
</body>
</html>
