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 ...
随机推荐
- C++ new到底new什么
VS2010-Debug版本 9: int *obj = new int(6); 00F714CE push //压栈 00F714D0 call operator new (0F711EAh) // ...
- Apache Hive （二）Hive安装
转自:https://www.cnblogs.com/qingyunzong/p/8708057.html Hive的下载 下载地址http://mirrors.hust.edu.cn/apache/ ...
- Chrome谷歌浏览器屏蔽百度搜索右侧广告推荐方法
先上图百度广告,其实屏蔽广告很简单 主要分成以下三步: 下载Adblock Plus插件 安装Adblock Plus插件 开启屏蔽 一.下载Adblock Plus插件(官网离线版) 二.安装Adb ...
- 14-敌兵布阵（HDU1166线段树 & 树状数组）
http://acm.hdu.edu.cn/showproblem.php?pid=1166 敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory ...
- Openssl verify命令
一.简介 verify命令对证书的有效性进行验证,verify 指令会沿着证书链一直向上验证,直到一个自签名的CA 二.语法 openssl verify [-CApath directory] [- ...
- OpenCV学习记录（二）：自己训练haar特征的adaboost分类器进行人脸识别 标签： 脸部识别opencv 2017-07-03 21:38 26人阅读
上一篇文章中介绍了如何使用OpenCV自带的haar分类器进行人脸识别(点我打开). 这次我试着自己去训练一个haar分类器,前后花了两天,最后总算是训练完了.不过效果并不是特别理想,由于我是在自己的 ...
- 协方差与pearson相关系数
协方差 协方差大于0,表示两个随机变量正线性相关 协方差等于0,表示两随机变量无线性相关 协方差小于0,表示两随机变量负线性相关 协方差智能表示随机变量的线性相关关系,不能刻画其相关程度. 因此引入了 ...
- LWIP内存管理
LWIP是一种TCP/IP协议栈,与嵌入式操作系统一样也提供了内存管理. 内存池里面有多个同样大小的内存,不同类型的内存池其里面的内存大小不一样.
- 两个线程并发执行以下代码，假设a是全局变量，那么以下输出______是不可能的？
3.两个线程并发执行以下代码,假设a是全局变量,那么以下输出______是不可能的? void foo(){ ++a; printf("%d ",a);}A.3 2 ...
- POC索引
最近在看窗口函数,接触到了POC索引,所以借此机会好好研究一下索引. 一般支持窗口函数的索引指南都遵循POC的概念,也就是Partitioning(分区).Ordering(排序)和Covering( ...