旋转的球（animation与 transform）
<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）的更多相关文章
- 用C3中的animation和transform写的一个模仿加载的时动画效果
用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS製作動畫效果(Transition、Animation、Transform)
CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...
- animation，transform属性
animation属性 使用@keyfarmes属性开启动画步骤 结构体:@keyfarmes name{ from{ } to{ } } @keyfarmes name{ 0%{ } 50%{ } ...
- animation transition transform
animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 div{width:100px;height:100px;background:red;animation:move ...
- #8.12.16总结#background transition、animation、transform
background-origin 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat此属性才会生效. background-origin :bord ...
- 基于CSS3新属性Animation及transform实现类似翻书效果
注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...
- CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
- animation,transition,transform小练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 简单说几个MySQL高频面试题
前言: 在各类技术岗位面试中,似乎 MySQL 相关问题经常被问到.无论你面试开发岗位或运维岗位,总会问几道数据库问题.经常有小伙伴私信我,询问如何应对 MySQL 面试题.其实很多面试题都是大同小异 ...
- algorithm库介绍之---- stable_sort()方法 与 sort()方法 .
文章转载自:http://www.cnblogs.com/ffhajbq/archive/2012/07/24/2607476.html 关于stable_sort()和sort()的区别: 你发现有 ...
- 我写了一个简单的JSON序列化和反序列化的工具
背景 互联网上有许多可用的Json序列化和反序列化的工具,例如fastjson,jackson,Gson等等,那么,我为什么还要自己写一个? 项目不方便依赖其他第三方库.比如有时候我们编写SDK,考虑 ...
- Python设计模式知多少
设计模式 设计模式是前辈们经过相当长的一段时间的试验和错误总结出来的最佳实践.我找到的资料列举了以下这些设计模式:工厂模式.抽象工厂模式.单例模式.建造者模式.原型模式.适配器模式.桥接模式.过滤器模 ...
- 重新整理 .net core 实践篇————配置应用[一]
前言 本来想整理到<<重新整理.net core 计1400篇>>里面去,但是后来一想,整理 .net core 实践篇 是偏于实践,故而分开. 因为是重新整理,那么就从配置开 ...
- Ribbon导航
简介 最近都在弄微服务的东西,现在来记录下收获.我从一知半解到现在能从0搭建使用最大的感触有两点 1.微服务各大组件的版本很多,网上很多博客内容不一定适合你的版本,很多时候苦苦琢磨都是无用功 2.网上 ...
- [Qt] 编译问题
shadow build https://blog.csdn.net/cjmcp/article/details/14135191 https://blog.csdn.net/josephfeng/a ...
- head元素的内容
一.head元素 head元素的内容用来向浏览器提供一些文档信息,此外还可以包含js脚本和css层叠样式单.head中一般包含title.meta.css.js等内容,head中元素的内容在浏览器中不 ...
- SSM整合（ForestBlog为例）
SSM整合(ForestBlog为例) 原版本github地址 :https://github.com/saysky/ForestBlog 文中版本地址:https://github.com/Yans ...
- 005.Python条件if语句
一 流程控制 流程控制的定义 流程:代码执行的过程 流程控制:对代码执行过程的管控 流程控制三大结构: 顺序结构:从上到下,代码依次执行 分支结构: 一共4个 循环结构:while for 分支结构 ...