纯粹玩一下，好像没有什么实际的卵用，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. SQL Server 与 Entity Framework 级联删除

    SQL Server 级联设置我就不多说了,网上很多教程. 我想提的是 cycles or multiple cascade paths 的问题. 简单的说如果你的级联设置不是一个树型,而是一个带有循 ...

  2. 解密随机数生成器（二）——从java源码看线性同余算法

    Random Java中的Random类生成的是伪随机数,使用的是48-bit的种子,然后调用一个linear congruential formula线性同余方程(Donald Knuth的编程艺术 ...

  3. MFC中DoDataExchange()的作用

    void CDlgSelectCS::DoDataExchange(CDataExchange* pDX) {     CDialog::DoDataExchange(pDX);     DDX_Te ...

  4. 黑马程序员_Java_collections and Arrays（工具类）

    collections collections工具类方法 1,static <T extends Comparable<? super T>> void sort(List&l ...

  5. HDU_1238——最大子串搜索

    Problem Description You are given a number of case-sensitive strings of alphabetic characters, find ...

  6. HDU-4857(拓扑排序)

    Problem Description 糟糕的事情发生啦,现在大家都忙着逃命.但是逃命的通道很窄,大家只能排成一行. 现在有n个人,从1标号到n.同时有一些奇怪的约束条件,每个都形如:a必须在b之前. ...

  7. (原)Apache添加完限速模块后的文件

    点我下载 解压后得到apache2文件夹和readme.txt文本 按照readme.txt修改apache2文件夹.

  8. Android下如何理解onMeasure，onLayout的过程

    在Android中view如何完成绘制这个过程介绍了很多,但是很多理论化的东西,最近重新整理一下,通俗的讲解一下. View绘制过程就好比你向银行贷款, 在执行onMeasure的时候,好比银行告诉你 ...

  9. 《Programming Massively Parallel Processors》Chapter5 习题解答

    自己做的部分习题解答,因为时间关系,有些马虎,也不全面,欢迎探讨或指出错误 5.1 Consider the matrixaddition in Exercise 3.1. Can one use s ...

  10. UVALive 6525 Attacking rooks 二分匹配 经典题

    题目链接:option=com_onlinejudge&Itemid=8&page=show_problem&problem=4536">点击打开链接 题意: ...