> 웹 프론트엔드 > HTML 튜토리얼 > [css3] 看博客学习别人的旋转的星球_html/css_WEB-ITnose

[css3] 看博客学习别人的旋转的星球_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:20:05
원래의
1509명이 탐색했습니다.

定义一个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; 运行时间不一样,这个快

<!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>
로그인 후 복사

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿