纯粹玩一下，好像没有什么实际的卵用，but，纯玩买不了上当，纯玩买不了受骗。。。。。。。。

地月旋转的一个css效果，无聊玩玩，可以复制到记事本试试

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS地心旋转效果</title>
　　<style>
　　.box

　　{
　　transform: scale(0.5);
　　position: relative;
　　padding: 1px;
　　height: 300px;
　　width: 300px;
　　margin:100px auto;
　　}
.sunline

　　{
　　position:relative;
　　height: 400px;
　　width: 400px;
　　border: 2px solid black;
　　border-radius: 50%;　　
　　margin: 50px 0 0 50px;
　　display: flex;
　　animation: rotate 10s infinite linear;
　　}
.sun

　　{
　　height: 100px;
　　width: 100px;
　　margin: auto;
　　background-color: red;
　　border-radius: 50%;

　　}
.earthline

　　{
　　position: absolute;
　　right: 0;
　　top: 50%;
　　height: 200px;
　　width: 200px;
　　margin: -100px -100px 0 0;
　　border: 1px solid black;
　　border-radius: 50%;
　　display: flex;
　　animation: rotate 2s infinite linear;
　　}
.earth

　　{
　　margin: auto;
　　height: 50px;
　　width: 50px;
　　background-color: green;
　　border-radius: 50%;
　　}
.moon

　　{
　　position: absolute;
　　left: 0;
　　top: 50%;
　　height: 20px;
　　width: 20px;
　　margin: -10px 0 0 -10px;
　　background-color: gray;
　　border-radius: 50%;
　　}
@keyframes rotate

　　{
　　100%{transform:rotate(360deg);　　

　　}
}
</style>
</head>
　<body>
　　<!-- 代码部分begin -->
　　<div class="box">
　　<div class="sunline">
　　<div class="sun"></div>
　　<div class="earthline">
　　<div class="earth"></div>
　　<div class="moon"></div>
　　</div>
　　</div>
　　</div>
　　<!-- 代码部分end -->
　</body>
</html>

CSS太阳月亮地球三角恋旋转效果的更多相关文章

  1. 【重点突破】——two.js模拟绘制太阳月亮地球转动

    一.引言 自学two.js第三方绘图工具库,认识到这是一个非常强大的类似转换器的工具,提供一套固定的接口,可用在各种技术下,包括:Canvas.Svg.WebGL,极大的简化了应用的开发.这里,我使用 ...

  2. OpenGL学习笔记 之三 （简单示例 太阳月亮地球）

    #include<glut.h> // 太阳.地球和月亮 // 假设每个月都是30天 // 一年12个月,共是360天 ;//day的变化:从0到359 void myDisplay(vo ...

  3. OpenGL “太阳、地球和月亮”天体运动动画 例子

    http://oulehui.blog.163.com/blog/static/7961469820119186616743/ OpenGL “太阳.地球和月亮”天体运动动画 例子 2011-10-1 ...

  4. WPF太阳、地球、月球运动轨迹模拟

    原文:WPF太阳.地球.月球运动轨迹模拟 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/details/ ...

  5. 55.纯 CSS 创作一个太阳、地球、月亮的运转模型

    原文地址:https://segmentfault.com/a/1190000015313341 感想:主要运用边框.伪元素.动画. HTML code: <div class="co ...

  6. 前端每日实战：55# 视频演示如何用纯 CSS 创作一个太阳、地球、月亮的运转模型

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RJjQYY 可交互视频 此视频是可 ...

  7. canvas动画---- 太阳、地球、月球

    <div> <canvas id="canvas" width="500" height="500"></ca ...

  8. 学习HTML5, Canvas及简单动画的使用

    通过在CSDN中的一些简单课程学习,跟随老师联系,做了如下的月亮,太阳和地球的运动效果.纪录在文章中,用于下次使用. 准备工作如下: 1. 使用三张背景图片 太阳 月亮 地球 2. 在HTML页面中定 ...

  9. HTML基础2——综合案例2——复杂的嵌套列表

    <html> <head> <title></title> </head> <body> <ul type="d ...

随机推荐

  1. AtomicInteger小小的理解

    这里仅仅是验证多线程环境下,AtomicInteger的安全性. 通过源码不难发现两点: 1.value属性是volatile修饰 2.使用了unsafe的CAS操作 通过上述两点,实现非阻塞同步(乐 ...

  2. [POJ] 1606 Jugs(BFS+路径输出)

    题目地址:http://poj.org/problem?id=1606 广度优先搜索的经典问题,倒水问题.算法不需要多说,直接BFS,路径输出采用递归.最后注意是Special Judge #incl ...

  3. ora-01445 无法从不带保留关键字的表的联接视图中选择 ROWID 或采样

    ora-01445无法从不带保留关键字的表的联接视图中选择 ROWID 或采样 从网上找了很多资料,许多都是没结贴的,说什么的都有,排查了一下sql 发现各个段的left join都没有错误. 有一个 ...

  4. 转：MFC文件操作

    讲到文件操作我们会联想到自己手动操作文件会涉及到哪些内容.很容易想到的是查看文件(文件夹)是否存在,创建,复制,删除,剪切文件(文件夹).另外就是设置文件的属性. 那MFC中一些操作文件的类也差不多是 ...

  5. 布置第一个JBOSS服务器

    还是要通过实践慢慢积累感觉.. SERVLET的制作,JAVAC的编译... package com.manning.jbia.intro; import java.io.IOException; i ...

  6. Special Pythagorean triplet

    这个比较简单,慢慢进入状态. A Pythagorean triplet is a set of three natural numbers, a b c, for which, a2 + b2 = ...

  7. [LeetCode 118] - 杨辉三角形(Pascal's Triangle)

    问题 给出变量numRows,生成杨辉三角形的前numRows行. 例如,给出numRows＝5,返回: [     [1],    [1,1],   [1,2,1],  [1,3,3,1], [1, ...

  8. VS2008 运行VC\Bin下的link.exe, cl.exe, lib.exe提示找不到mspdb80.dll的解决方法

    天在用link.EXE的LIB命令生成用于连接(LINK)使用的lib文件时提示:找不到mspdb80.dll. 原因:Microsoft Visual Studio\VC\Bin\下没有 “msob ...

  9. 【HDOJ】3316 Mine sweeping

    简单BFS. #include <iostream> #include <cstdio> #include <cstring> #include <cstdl ...

  10. 解决：安装SQl 2008为SQL Server代理服务提供的凭据无效

    Q: 在Windows Server 2008安装SQL Server 2008出现的问题: 安装时在“服务器配置”环节出现以下问题:为sql server代理服务提供的凭据无效为sql server ...