纯粹玩一下，好像没有什么实际的卵用，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. 『安全工具』注入神器SQLMAP

    Pic by Baidu 0x 00 前言 正是SQLMAP这种神器的存在,SQL注入简直Easy到根本停不下来.... PS:国内类似软件也有阿D,明小子,挖掘机,当你用过他们之后你才会发现SQLM ...

  2. 优化大型复杂SQL

    with aa as (select a.agmt_id, sum(c.acct_bal) as card_bal, --借记卡期末存款余额 a.card_open_org, a.OPEN_DATE, ...

  3. BZOJ1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富

    1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 459  Sol ...

  4. uniq 命令

    uniq 命令 文字 uniq是LINUX命令 用途 报告或删除文件中重复的行. 语法 uniq [ -c | -d | -u ] [ -f Fields ] [ -s Characters ] [ ...

  5. NOI2014题解

    起床困难综合症(BZOJ 3668) 送分题,直接从高位向低位贪心. 魔法森林(BZOJ 3669) 一个容易想到的办法就是枚举A的最大值,以B作为权值求最小生成树.暴力的话要T的.如果从小到大枚举A ...

  6. 有关UITableViewCell的侧滑删除以及使用相关大神框架MGSwipeTableCell遇到的小问题

    提起笔,却不知道从何写起了,今天一整天都耗费在了这个可能根本不算是问题的小问题上,至今仍有一种蛋蛋的忧桑..(噢,不是提笔,是键盘手T_T) 表格视图在项目中就像是每日的家常便饭,在cell上添加侧滑 ...

  7. ie11 selenium 报错org.openqa.selenium.NoSuchWindowException: Unable to get browser 处理方法

    selenium + ie11运行报错 org.openqa.selenium.NoSuchWindowException: Unable to get browser (WARNING: The s ...

  8. BLOG PLUGINS

    文章分享按钮 (1)加网(JiaThis) (2)百度分享 文章关联推荐 每篇博文下面可以显示你博客中与该篇博文有些关联的几篇文章,也就是智能推荐,一方面可以增加你博文的曝光率和点击率,一方面也可以给 ...

  9. Linux查找yum安装软件在系统中路径

    find文件查找http://www.ruanyifeng.com/blog/2009/10/5_ways_to_search_for_files_using_the_terminal.html

  10. Python Cookbook笔记

    字符串:s.strip()  删除字符串开始和结尾的空白字符. s.lstrip() 删除左边的,s.rstrip()  删除右边的. 随机数:random.random()  生成0-1之间的数. ...