旋转的球(animation与 transform)
2024-08-29 10:16:01
<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>
最新文章
- Sublime Text3插件管理
- google开发者工具调试技巧
- 基于DDD的.NET开发框架 - ABP工作单元(Unit of Work)
- js验证姓名和身份证号
- Spring 中注入 properties 中的值
- JavaScript实现进入某一页面时自动将鼠标光标放在某一textbox上
- shell script的连接符是逗号,不是英文的句号
- 权限控制框架Shiro简单介绍及配置实例
- (剑指Offer)面试题23:从上到下打印二叉树
- express cookie-session解惑
- 【转】android错误 aapt.exe已停止工作的解决方法
- yii_wiki_145_yii-cjuidialog-for-create-new-model (通过CJuiDialog来创建新的Model)
- mvc图片地址
- hdu 1728 搜索求最少的转向次数
- SQL Server的case when用法
- XML语言2.约束
- linu系统文件授权命令
- 集成学习算法汇总----Boosting和Bagging(推荐AAA)
- WIdo联网代码中文注释
- Haskell语言学习笔记(82)Extensible effects
热门文章
- MySQL修改账号密码方法大全
- 手把手教你部署验证freeswitch(避免踩坑)
- 通过CRM系统实现工作流程自动化
- 一看就懂的MySQL的聚簇索引,以及聚簇索引是如何长高的
- Envoy :V3APi 开启 TLS
- [Python] execl读写
- 【转载】在Linux系统下用dd命令制作ISO镜像U盘启动盘
- shell脚本 在后台执行de 命令 >;>; 文件 2>;&;1 将标准输出与错误输出共同写入到文件中(追加到原有内容的后面)
- nginx负载均衡搭建phpmyadmin加入redis了解session会话原理
- DOS 命令大全用法详解