<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
* {
padding:0px;
margin:0px;
}
body {
transform:scale(0.4)
}
.da {
margin-top:10%;
margin-left:30%;
width:400px;
height:400px;
border:1px solid #000000;
position:relative;
display:flex;
border-radius:50%;
animation:rot 10s infinite linear;
}
.hong{
width:50px;
height:50px;
background-color:red;
border-radius:50%;
margin:auto;
}
.xiaoquan {
width:200px;
height:200px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-100px -100px 0 0;
}
.lan {
width:40px;
height:40px;
background-color:#0026ff;
margin:auto;
margin-left:80px;
border-radius:50%;
}
.wuquan {
width:100px;
height:100px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-50px -50px 0 0;
} .cheng {
width:30px;
height:30px;
background-color:#ff6a00;
margin:auto;
border-radius:50%;
} .lv {
width:20px;
height:20px;
background-color:#4cff00;
position:absolute;
margin:40px 0 0 -10px;
border-radius:50%;
} .xiaquan {
width:200px;
height:200px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:100px 100px 0 0;
}
.xiawuquan {
width:100px;
height:100px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:50px 50px 0 0;
}
.xialv {
width:20px;
height:20px;
background-color:#4cff00;
position:absolute;
margin:-10px 0 0 40px;
border-radius:50%;
}
.zuoquan {
width:200px;
height:200px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-100px 300px 0 0;
}
.zuowuquan {
width:100px;
height:100px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-50px 150px 0 0;
}
.zuolv {
width:20px;
height:20px;
background-color:#4cff00;
position:absolute;
margin:40px 0 0 90px;
border-radius:50%;
} .shangquan {
width:200px;
height:200px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-300px 100px 0 0;
}
.shangwuquan {
width:100px;
height:100px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-150px 50px 0 0;
}
.shanglv {
width:20px;
height:20px;
background-color:#4cff00;
position:absolute;
margin:90px 0 0 40px;
border-radius:50%;
}
@keyframes rot {
100% {transform:rotate(360deg) }
}
</style>
</head>
<body>
<div class="da">
<div class="hong"></div>
<div class="xiaoquan">
<div class="lan"></div>
<div class="wuquan">
<div class="cheng"></div>
<div class="lv"></div>
</div>
</div> <div class="xiaquan">
<div class="lan"></div>
<div class="xiawuquan">
<div class="cheng"></div>
<div class="xialv"></div>
</div>
</div> <div class="zuoquan">
<div class="lan"></div>
<div class="zuowuquan">
<div class="cheng"></div>
<div class="zuolv"></div>
</div>
</div> <div class="shangquan">
<div class="lan"></div>
<div class="shangwuquan">
<div class="cheng"></div>
<div class="shanglv"></div>
</div>
</div>
</div>
</body>
</html>

旋转的球(animation与 transform)的更多相关文章

  1. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  2. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS製作動畫效果(Transition、Animation、Transform)

    CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...

  4. animation,transform属性

    animation属性 使用@keyfarmes属性开启动画步骤 结构体:@keyfarmes name{ from{ } to{ } } @keyfarmes name{ 0%{ } 50%{ } ...

  5. animation transition transform

    animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 div{width:100px;height:100px;background:red;animation:move ...

  6. #8.12.16总结#background transition、animation、transform

    background-origin 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat此属性才会生效. background-origin :bord ...

  7. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

  8. CSS3与动画有关的属性transition、animation、transform对比

    最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...

  9. animation,transition,transform小练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [笔记] 《c++ primer》显示器程序 Chapter7

    补充Sales_data没有体现出的其他类特性 Screen.h 1 #include <string> 2 #include <iostream> 3 4 class Scr ...

  2. tar解压某个目录 tar解压某个指定的文件或者文件夹

    tar解压某个目录 tar解压某个指定的文件或者文件夹 发布时间:2017-05-30 来源:服务器之家   1. 先查看压缩文档中有那些文件,如果都不清楚文件内容,然后就直接解压,这个是不可能的 使 ...

  3. Kali Linux 安装中文输入法

    1.设置源 vim /etc/apt/sources.list 添加一行 deb http://mirrors.aliyun.com/kali kali-rolling main non-free c ...

  4. 数据库权限grant

    数据库权限grant 创建授权grant 权限类型(priv_type) 权限类型 代表什么? ALL 所有权限 SELECT 读取内容的权限 INSERT 插入内容的权限 UPDATE 更新内容的权 ...

  5. DOS 命令大全用法详解

    注意事项 DOS命令不区分大小写,比如C盘的Program Files,在dos命令中完全可以用"program files"代替,加上英文引号是因为名称的中间有空格(即多于一个词 ...

  6. JFlash ARM对stm32程序的读取和烧录-(转载)

    本篇文章主要是记录一下JFlash ARM 的相关使用和操作步骤,读取程序说不上破解,这只是在没有任何加密情况下对Flash的读写罢了!在我们装了JLINK驱动后再根目录下找到JFlash ARM , ...

  7. MyBatisPlus详细总结记录

    本文由 简悦 SimpRead 转码, 原文地址 mp.weixin.qq.com 小 Hub 领读: 一篇写得非常详细的文章,增删改查,各种插件,让你测底熟悉 mybatis plus. 作者:yo ...

  8. Failed to start component [StandardEngine[Tomcat].StandardHost[localhost].StandardContext[]] 错误(Day_25)

    错误:    在maven项目,web启动的时候报这个错误 Failed to start component [StandardEngine[Tomcat].StandardHost[localho ...

  9. Qt 设置窗体透明

    一.前言 在音频开发中,窗体多半为半透明.圆角窗体,如下为Qt 5.5 VS2013实现半透明方法总结. 二.半透明方法设置 1.窗体及子控件都设置为半透明 1)setWindowOpacity(0. ...

  10. Git 分支基本命令

    1. 查看当前分支 (git branch) 2. 创建分支 (git branch 分支名) 3.切换分支(git checkout 分支名) 4.分支上的常规操作 5.分支的合并 (git che ...