地球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地球</title>
<link rel="stylesheet" href="./index.css">
<style>
body {
background: #000;
}
.planet {
width: 280px;
height: 280px;
background: #07132f;
border-radius: 150px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -140px;
margin-top: -140px;
overflow: hidden;
box-shadow: 0px 0px 55px rgba(20, 100, 255, 0.7);
border: 1px solid #0089dd;
border-right: none;
-webkit-transform: rotateZ(15deg);
transform: rotateZ(15deg)
}
.planet:after {
content: "";
width: 90px;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
position: absolute;
right: 0;
}
.planet:before {
content: "";
width: 90px;
height: 100%;
background: linear-gradient(to right, rgba(10, 130, 255, 0.6), rgba(0, 0, 0, 0));
position: absolute;
left: 0;
z-index: 3;
}
.texture {
position: absolute;
left: -360px;
-webkit-animation: rotation 30s linear infinite;
animation: rotation 30s linear infinite;
content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/earth_copy.jpg);
height: 320px;
background-size: cover;
}
@keyframes rotation {
0% {
left: -845px
}
100% {
left: -185px
}
}
@-webkit-keyframes rotation {
0% {
left: -845px
}
100% {
left: -185px
}
}
</style>
</head>
<body>
<div class="planet">
<div class="texture"></div>
</div>
</body>
</html>
预览 | 下载
感谢各位的阅读,更多文章请前往九天小窝。