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 ...
随机推荐
- 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 13—Clustering 聚类
Lecture 13 聚类 Clustering 13.1 无监督学习简介 Unsupervised Learning Introduction 现在开始学习第一个无监督学习算法:聚类.我们的数据没 ...
- 转载--浅谈spring4泛型依赖注入
转载自某SDN-4O4NotFound Spring 4.0版本中更新了很多新功能,其中比较重要的一个就是对带泛型的Bean进行依赖注入的支持.Spring4的这个改动使得代码可以利用泛型进行进一步的 ...
- 基于NodeJS的14款Web框架
摘要: 在几年的时间里,Node.js逐渐发展成一个成熟的开发平台,吸引了许多开发者.有许多大型高流量网站都采用Node.js进行开发,像PayPal, 此外,开发人员还可以使用它来开发一些快速移动W ...
- Excel VBA 获取按钮对象
今天给同事写了两个VBA宏,并分别把宏赋给了两个按钮. 因为两个宏都是实现在两种显示方式之间切换,于是我想除了功能的实现外,还希望在切换到其中一种方式时,按钮上面的文字也可以跟着改变,起到提示作用. ...
- 在zookeeper集群的基础上，搭建伪solrCloud集群
伪集群的搭建:将solrCloud搭建到同一台机器上. 准备工作 1 将在window中部署的单机版solr上传到服务器(虚拟机)中 solr的简单部署:在tomcat中启动slor 的内容 这一次放 ...
- Finite State Transducers
一, 简介 Finite State Transducers 简称 FST, 中文名:有穷状态转换器.在自然语言处理等领域有很大应用,其功能类似于字典的功能(STL 中的map,C# 中的Dictio ...
- DBArtist之Oracle入门第3步: 安装配置PL/SQL Developer
操作系统: WINDOWS 7 (64位) 数据库: Oracle 11gR2 (64位) PL/SQL Developer : PL/SQL ...
- C++ std::unordered_multimap
std::unordered_multimap template < class Key, // unordered_multimap::key_type class T, // unorder ...
- IntelliJ IDEA 安装
1.在终端输入sudo vim /private/etc/hosts 2.在打开的hosts文件中,在尾行添加 0.0.0.0 account.jetbrains.com 3.去网站http://id ...
- C语言访问mysql数据库
mysql中新建的数据库为hyx,hyx中的表为my_schema,表中的数据为下图: 编写代码,访问表中的数据,测试代码如下: #include "stdafx.h" #incl ...