水星金星地球火星自转动画-html代码-BFW代码库

水星金星地球火星自转动画

代码语言：html

所属分类：动画

代码描述：水星金星地球火星自转动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 10px),
radial-gradient(white, rgba(255,255,255,.15) .5px, transparent 5px),
radial-gradient(white, rgba(255,255,255,.1) 1px, transparent 10px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 5px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
}

.mercury {
    width: 114px;
    height: 114px;
    background-image: url(http://repo.bfw.wiki/bfwrepo/image/5ef16a3f39164.png);
    border-radius: 50%;
    background-size: cover;
    box-shadow: -70px -20px 70px 2px rgb(29, 28, 28) inset, 2px 0 20px rgba(167, 160, 147, 0.384);
    animation: spin 30s linear infinite;
    transform: rotate(2deg);
    backface-visibility: hidden;
  
}

.venus {
    width: 285px;
    height: 285px;
    background-image: url(http://repo.bfw.wiki/bfwrepo/image/5ef16a632cd24.png);
);
    border-radius: 50%;
    background-size: cover;
    box-shadow: -80px -20px 70px 2px rgb(29, 28, 28) inset, 3px 0 20px rgba(206, 182, 138, 0.555);
    animation: spin 30s linear reverse infinite;
    transform: rotate(3deg);
    backface-visibility: hidden;
    
}

.earth .........完整代码请登录后点击上方下载按钮下载查看