css3动画（animation）效果2-旋转的星球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转的星球</title>
<style type="text/css">
.box {
transform: scale(0.5);
position: relative;
padding: 1px;
height: 300px;
width: 300px;
} .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%;
box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;
} .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: blue;
border-radius: 50%;
} .moon {
position: absolute;
left: 0;
top: 50%;
height: 20px;
width: 20px;
margin: -10px 0 0 -10px;
background-color: black;
border-radius: 50%;
} @keyframes rotate {
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="sunline">
<div class="sun"></div>
<div class="earthline">
<div class="earth"></div>
<div class="moon"></div>
</div>
</div>
</div>
<strong>【简要介绍】</strong>
<p>旋转的星球主要通过rotate()旋转函数来实现。实际上，蓝色的地球和黑色的月球并没有发生旋转，只是其父级旋转形成的视觉上的旋转效果</p>
</body>
</html>
效果图：
原链接：https://www.cnblogs.com/xiaohuochai/p/5419236.html
css3动画（animation）效果2-旋转的星球的更多相关文章
- css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
- CSS3动画animation认识，animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- 使用CSS3动画属性实现各种旋转跳跃
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...
- CSS3 动画3D视角下 旋转圆环
首先是 transform 属性: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 加上对应属性则可得到3D透视效果下的形态 本次以圆形( ...
- css3动画animation
动画:animation animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...
- CSS3动画（360度旋转、旋转放大、放大、移动）
Title div { width: 120px; height: 120px; line-height: 120px; margin: 20px; background-color: #5cb85c ...
随机推荐
- https 理解
这张图已经很明白,以下为翻译: 一.秘钥传输过程(确认秘钥相同) 1.请求服务端 2.服务端有公司要 3.公钥发给客户端 4.验证发过来的公钥crt,生成随机秘钥,并用此公钥加密 5.加密后的秘钥发给 ...
- FreeSWITCH--配置代接电话
配置代接电话,需要更改 分机.拨号计划.外线 的配置 一.配置分机 代接组内分机的这个“组”, 不是“conf/directory/default.xml"中配置的 group,而是要在分机 ...
- 理解python中的元类
一,理解类也是对象 在python中类同样也是一种对象,只要使用关键字class,Python解释器在执行的时候就会创建一个对象,这个对象(类)自身拥有创建对象(类实例)的能力,这就是为什么他是一个类 ...
- GameObject.Find 使用技巧
GameObject.Find是全局搜索 如果你已经知道这个元件在哪个元件里面的话,且担心场景中有重名元件,可以这样写 GameObject.Find ("Canvas/Panel/Imag ...
- robotframework中文显示乱码
问题描述:接口.数据库返回信息有中文的时候会显示unicode的样式,如图 解决方法: 1.robotframework为3.0.X 2.找到Python安装目录下的\Lib\site-package ...
- Zookeeper使用--Java API
1 创建节点 创建节点有异步和同步两种方式.无论是异步或者同步,Zookeeper都不支持递归调用,即无法在父节点不存在的情况下创建一个子节点,如在/zk-ephemeral节点不存在的情况下创建/ ...
- python准确判断文件类型
判断文件类型在开发中非常常见的需求,怎样才能准确的判断文件类型呢?首先大家想到的是文件的后缀,但是非常遗憾的是这种方法是非常不靠谱的,因为文件的后缀是可以随意更改的,而大家都知道后缀在linux系统下 ...
- [Cookie] Read Cookie and Pass in headers
在同一个Suite里 import com.eviware.soapui.support.types.StringToStringMap def headers = testRunner.testCa ...
- SpringMVC 细节学习
使用Spring MVC,配置DispatcherServlet是第一步 DispatcherServlet是前置控制器,配置在web.xml文件中的 .拦截匹配的请求,Servlet拦截匹配规则要 ...
- git 进阶操作
1.blame git blame +文件名,可以查看到某个文件每一行最近一次是由谁编辑修改的.-L 22,33 选项可以制定 2.bisect 开始git bisect: $ git bisec ...