纯粹玩一下，好像没有什么实际的卵用，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. 突破路由mac地址过滤思路

    一.获取合法的mac地址 在拿到无线网络的密码时,主要思路就是,用类似airodump-ng这类监听软件(WildPackets OmniPeek,Kismet),获得合法客户端的mac地址,然后再更 ...

  2. 解决TextView与RadioGroup不对齐的问题

    TextView和RadioGroup是在同一个LinearLayout中的,控件摆放方式是android:orientation="horizontal",虽然三个控件是水平摆放 ...

  3. 【转】Java多线程操作局部变量与全局变量

    原文网址:http://blog.csdn.net/undoner/article/details/12849661 在这篇文章里,我们首先阐述什么是同步,不同步有什么问题,然后讨论可以采取哪些措施控 ...

  4. iOS开发手记 - iOS9.3 UINavigationController添加后不显示storyboard中viewcontroller里的控件的解决方法

    我原先是这么做的,通常也是这么做 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSD ...

  5. HDU_2057——64位无符号16进制数的运算

    Problem Description There must be many A + B problems in our HDOJ , now a new one is coming. Give yo ...

  6. HDU2196-Computer

    原题连接: http://acm.hdu.edu.cn/showproblem.php?pid=2196 思路: 好了,无敌了,经过昨晚4个钟头+今上午1个小时的奋战,这题终于被我AC了 收获的确是不 ...

  7. linux mount命令学习

    我们在下面这篇博文中已经有笼统的学习了文件系统的一些相关知识, http://blog.csdn.net/boyxulin1986/article/details/12107113 本篇我们主要是用来 ...

  8. jquery绑定事件on的用法

    语法 $(selector).on(event,childSelector,data,function,map) 参数 描述 event 必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分 ...

  9. JavaScript新手学习笔记4——我记不住的几个坑：短路逻辑、按值传递、声明提前

    1.短路逻辑 逻辑运算中,如果前一个条件已经可以得出最终结论,则后续所有条件不再执行!这里的逻辑运算指的是逻辑与和逻辑或. 我们要理解逻辑与是两个条件都为真的时候,才为真,如果第一个就是假的,那么后面 ...

  10. easyui 获取cloumns字段

    var colums=datagrid.datagrid('options').columns; var frozens=datagrid.datagrid('options').frozenColu ...