欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

[css3] 看博客学习别人的旋转的星球 - 陶士涵

程序员文章站 2022-04-24 23:15:09
...
定义一个div 太阳轨道sunline,边框显示出来,定义position为relative

#sunline{

width: 500px;

height: 500px;

border:2px solid #000;

border-radius: 50%;

margin:50px auto;

position: relative;

animation:sunRotate 5s;

}

定义一个div 太阳sun,把红太阳放在中间,居中显示,定义position为absolute,

距左50%,剧上50%,左边距负的宽度的一半,上边距负的高度的一半

#sun{

background: red;

width: 150px;

height: 150px;

position: absolute;

left: 50%;

top:50%;

margin-left:-75px;

margin-top: -75px;

border-radius: 50%;

}

定义一个地球的轨道 earthline,边框显示出来,定义position为absolute,距左50%,剧上负的高度一半,左边距负的宽度的一半

#earthline{

width: 200px;

height: 200px;

border:1px solid #000;

border-radius: 50%;

position: absolute;

left: 50%;

top: -100px;

margin-left: -100px;

}

定义一个div 地球 earth,把地球放在水平居中,太阳轨道垂直地球居中,定义position为absolute,距左50%,剧上50%,左边距负的宽度的一半,上边距负的高度的一半

#earth{

background: green;

width: 100px;

height: 100px;

border-radius: 50%;

position: absolute;

left: 50%;

margin-left: -50px;

top: 50%;

margin-top: -50px;

}

定义一个月球moon,定义position为absolute,距左50%,剧上负的高度一半,左边距负的宽度的一半

#moon{

width: 40px;

height: 40px;

background: blue;

border-radius: 50%;

position: absolute;

left: 50%;

margin-left: -20px;

top: -20px;

}

定义动画@keyframes,100%的进度的时候,旋转一圈

@keyframes sunRotate{

100%{

transform:rotate(360deg);

}

}

为太阳轨道sunline绑定动画,使用属性animation,参数:规则名称,执行时间,速度曲线,延迟时间,播放次数,是否反向

animation:sunRotate 10s linear 0s infinite;

速度曲线: linear(线性匀速) ease(缓动)

播放次数:infinite(无限次数)

为地球轨道earthline绑定动画

animation:sunRotate 5s linear 0s infinite; 运行时间不一样,这个快

[css3] 看博客学习别人的旋转的星球 - 陶士涵

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>title>
style>
#sunline{
  width: 500px;
  height: 500px;
  border:2px solid #000;
  border-radius: 50%;
  margin:100px auto;
  position: relative;
  animation:sunRotate 10s linear 0s infinite;
}
#sun{
  background: red;
  width: 150px;
  height: 150px;
  position: absolute;
  left: 50%;
  top:50%;
  margin-left:-75px;
  margin-top: -75px;
  border-radius: 50%;
}
#earthline{
  width: 200px;
  height: 200px;
  border:1px solid #000;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: -100px;
  margin-left: -100px;
  animation:sunRotate 5s linear 0s infinite;
}
#earth{
  background: green;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: -50px;
}

#moon{
  width: 40px;
  height: 40px; 
  background: blue;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: -20px;
}
@keyframes sunRotate{
  100%{
    transform:rotate(360deg);
  }
}
style>
head>
body>
div id="sunline">
  div id="sun">div>
  div id="earthline">
    div id="earth">div>
    div id="moon">div>
  div>
div>
body>
html>