纯粹玩一下，好像没有什么实际的卵用，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. hdu 4541 Ten Googol

    http://acm.hdu.edu.cn/showproblem.php?pid=4541 打表找规律 #include <cstdio> #include <cstring> ...

  2. 关于mysql的自增

    http://my.oschina.net/zimingforever/blog/136599 http://flandycheng.blog.51cto.com/855176/280224 http ...

  3. HDU_2014——计算平均分

    Problem Description 青年歌手大奖赛中,评委会给参赛选手打分.选手得分规则为去掉一个最高分和一个最低分,然后计算平均得分,请编程输出某选手的得分.   Input 输入数据有多组,每 ...

  4. jQuery扩展与noConflict的用法-小示例

    有时我们要用到自己定义的jquery,这时可以通过jQuery扩展来实现该功能 index.html <!DOCTYPE html> <html> <head> & ...

  5. 关闭myeclipse中jsp的校验功能

    window--->preference--->Myeclipse--->Validation,取消下图红框中的选中状态.

  6. lesson6:jmeter和badboy配合使用

    由于jmeter不支持脚本的录制,只能手动设置,在某些集成型的压力测试时,使用不是很方便,这时可以和badboy一起配合使用,badboy支持网页操作的录制功能,并能把录制的操作导出为jmeter的脚 ...

  7. zabbix监控应用连接数

    zabbix使用用户自定义键值来监控应用系统连接数: 1.修改配置文件zabbix_agentd.conf 格式: UserParameter=<key>,<shell comman ...

  8. linux下查阅文件内容cat,more,less,tail

    1.常用cat,直接查看,一次性全部输出 cat  filename cat -b filename 显示行号,除空白行   cat -n 显示行号,包括空白行 常用:cat  filename | ...

  9. rpm软件包类型

    rpm软件包 在linux世界里有两种流行的包管理方式,分别是redhat系的rpm和debian系的deb.其中rpm是RedHat Package Manager(RedHat软件包管理工具)的简 ...

  10. 小学生之KTV播放原理

    第一步: 创建一个Song类 //歌曲名称 public  string SongName { get; set; } //歌曲路劲 public string SongPath { get; set ...