旋转的球（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 ...
随机推荐
- Python数模笔记-（1）NetworkX 图的操作
1.NetworkX 图论与网络工具包 NetworkX 是基于 Python 语言的图论与复杂网络工具包,用于创建.操作和研究复杂网络的结构.动力学和功能. NetworkX 可以以标准和非标准的数 ...
- MySQL DDL详情揭露
前言: MySQL中DDL语句,即数据定义语言,用于创建.删除.修改.库或表结构,对数据库或表的结构操作.常见的有create,alter,drop等.这类语句通常会耗费很大代价,特别是对于大表做表结 ...
- [re模块、json&pickle模块]
[re模块.json&pickle模块] re模块 什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则 ...
- shell脚本常用语法详解
逻辑控制 if 语法:注意空格 a=1b=2if [ $a == $b ]then echo "a==b"elif [ $a -gt $b ]then echo &qu ...
- pt-online-schema-change 大数据表结构修改
使用场景: 在线修改大数据量表结构(ALTER tables without locking them) 文档参考:https://www.percona.com/doc/percona-toolki ...
- Swagger简明教程
一.什么是swagger Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法, ...
- [bug] 安装MySQL8.0.15 失败，提示This application requires Visual Studio 2015 x64 Redistributable
参考 https://blog.csdn.net/weixin_44092289/article/details/88045666
- stressapptest工具
1.在H桌面V7B04上运行stressapptest工具编译报错.请研发协助! 2.因为stressapptest工具在兆芯和龙芯都能正常运行,所以我怀疑是工具stressapptest未在H桌面V ...
- 抓住异步编程async/await语法糖的牛鼻子: SynchronizationContext
长话短说,本文带大家抓住异步编程async/await语法糖的牛鼻子: SynchronizationContext 引言 C#异步编程语法糖async/await,使开发者很容易就能编写异步代码. ...
- java并发编程工具类JUC第四篇:LinkedBlockingQueue链表队列
在之前的文章中已经为大家介绍了java并发编程的工具:BlockingQueue接口.ArrayBlockingQueue.DelayQueue. LinkedBlockingQueue 队列是Blo ...