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;
}

.arrow {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 10px solid #22273B;
}

.quote {
  background-color: #22273B;
  border-radius: 10px;
  font-size: .8rem;
  line-height: 25px;
  letter-spacing: 0.02em;
  padding: 14px 0;
  margin-block: 120px;
  color: #f2f2f2;
  font-family: "Open Sans", sans-serif;
  text-align: left;
  max-width: 100%;
  width: 500px;
  opacity: .8;
  box-shadow: 0 0 20px rgba(242, 242, 242, 0.2);
}

em{
  font-size: 0.8rem;
}

@keyframes rotate {
  0% {
 .........完整代码请登录后点击上方下载按钮下载查看