css实现宇宙星空地球运转文章动态背景效果代码-html代码-BFW代码库

css实现宇宙星空地球运转文章动态背景效果代码

代码语言：html

所属分类：背景

代码描述：css实现宇宙星空地球运转文章动态背景效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


body {
  background: url("//repo.bfw.wiki/bfwrepo/image/630e852e40497.png"), url("//repo.bfw.wiki/bfwrepo/image/63e740700414a.png"); 
 background-blend-mode: multiply;
 animation: spacetravel 800s linear infinite; 
} 

.container{
  display: flex;
  align-items: center;
  justify-content: center;
}

#earth {
  width: 80px;
  height: 80px;
  box-shadow: inset 16px 0 40px 3px rgba(0, 0, 0, 0.9),
    inset -3px 0 5px 2px rgba(255, 255, 255, 0.16);
  background-image: url('//repo.bfw.wiki/bfwrepo/image/6098ffa058cd1.png');
  background-size: 190px;
  margin: 0 50px 0 0px;
  border-radius: 50%;
  position: relative;
  animation-name: rotate;
  animation-duration: 12s, 12s, 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.earth-info {
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
}.........完整代码请登录后点击上方下载按钮下载查看