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 ...
随机推荐
- DataTable相关
设置主键列: this.tableTestData.PrimaryKey = new DataColumn[] { this.tableTestData.Columns[0] };
- Python入门之 字符串操作，占位符，比较大小 等
Python 字符串 常用的操作 切片 左包括右不包括的原则 ________________ 比较字符串大小 eg: cmp("a",'b') -1第一个比第二个小 0 ...
- 使用Qt Installer Framework制作软件安装包
概述 Qt Installer Framework(缩写QIF)是Qt官方用于生成软件安装包的工具.包括Qt Creator和Qt Installer Framework自身的安装包都是由这个工具制作 ...
- 178. Rank Scores - database - 178. Rank Scores （Oracle）
题目链接 https://leetcode.com/problems/rank-scores/description/ 题意:对所有的分数按照降序进行排序,查询出分数和排名,排名相同的输出相同名 ...
- 高性能python编程之协程(stackless)-乾颐堂
我们都知道并发(不是并行)编程目前有四种方式,多进程,多线程,异步,和协程. 多进程编程在python中有类似C的os.fork,当然还有更高层封装的multiprocessing标准库,在之前写过的 ...
- nginx与tomcat 组合 实现静态文件和jsp组合访问
主要修改nginx的配置文件: 设置代理 location /{proxy_pass http://47.94.158.2:8080;proxy_redirect off;proxy_set_head ...
- atom插件记录
├── Zen@0.16.4 写作的时候用,很给力 ├── atom-beautify@0.29.9 美化一切代码 ├── autocomplete-paths@1.0.2 路径自动提示 ├── au ...
- MP3 Lame 转换 参数 设置(转)
我们在对音频格式的转换中,打交道最多的就是MP3了.如果你能彻底玩转MP3,那么对你的音频创作和对其他音频格式的掌握会有很大的帮助.下面我们给大家介绍MP3制作软件:LAME 要制作出高音质的MP3靠 ...
- [GO]二进制文件的拷贝
writestring的方式只适用于字符串的写入,对于十进制文件的写入只要使用write就可以了 package main import ( "os" "fmt" ...
- idea中dependencies中总是有红色波浪线（缺少dependency）问题
使用IDEA进行maven开发时,将新项目import进工作空间时,Maven Projects栏中的dependencies中总是有红色波浪线,如下图: 但是这些jar在我本地的maven仓库中实际 ...