css 轨道,css 实现多个小球绕轨道运动
.outer-circle {
display: inline-block;
width:300px;
height: 300px;
margin: 50px auto;
text-align: center;
border-radius: 100%;
background: palegoldenrod;
position: relative;
}
.circle1 {
width: 50px;
height: 50px;
line-height: 50px;
background: cadetblue;
border-radius: 100%;
position: absolute;
top:50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
animation: rotate1 5s infinite linear;
/* transform: translate(0,-150px); */
}
.circle2 {
width: 40px;
height: 40px;
line-height: 40px;
background: yellowgreen;
border-radius: 100%;
position: absolute;
top:50%;
left: 50%;
margin-left: -20px;
margin-top: -20px;
animation: rotate2 3s infinite linear;
/* transform: translate(150px, 0); */
}
@keyframes rotate1 {
from {
transform: rotate(0turn) translate(0,-150px) rotate(1turn)
}
to {
transform: rotate(1turn) translate(0,-150px) rotate(0turn)
}
}
@keyframes rotate2 {
from {
transform: rotate(0turn) translate(150px, 0) rotate(1turn)
}
to {
transform: rotate(1turn) translate(150px, 0) rotate(0turn)
}
}
css 轨道,css 实现多个小球绕轨道运动相关推荐
- 纯CSS3动画实现小球绕轨道旋转效果
效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> & ...
- canvas 多个小球绕椭圆轨道转动
canvas实现小球绕轨道转动,并点击某一个后可以加速运动到指定位置,第一次使用canvas做动画,代码有些乱 = =,话不多说看代码,拷贝添加图片可以直接运行 canvas椭圆轨道运动 // An ...
- html的公共样式,HTML+CSS入门 CSS公共样式
本篇教程介绍了HTML+CSS入门 CSS公共样式,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < @charset "utf-8"; *{margin ...
- CSS：CSS+DIV布局网页
现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...
- 解决vue-awesome-swiper中swiper/css/swiper.css无法导入问题
0 文章太长懒得看 将语句:import 'swiper/css/swiper.css' 修改为:import 'swiper/swiper-bundle.css' 1 出错原因 报错提示为 * sw ...
- 代码：CSS——reset.css
代码:CSS--reset.css http://www.cnblogs.com/qq21270/p/5577856.html 图片列表 A链接标签: /*链接样式.文字颜色*/a{color:#66 ...
- css expressionr,CSS自定义属性expression_r
CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色.大小.距离等静态样式有效,对于要实现某些html元素的动态样式就显得有些力不从心.有了CSS的自定义属性expr ...
- html css精灵,谈谈CSS Sprites(css精灵)
CSS Sprites在国内很多人叫css精灵,其实这个技术不新鲜,这个技术老到什么程度呢,我不敢确定,但是我看到最早的关于CSS Sprites是在Dave Shea的<CSS Sprites ...
- #CSS# 初识CSS
CSS:Cascading Style Sheet (层叠样式表) CSS的内容可以分开写入CSS文件中,PHP文件中加入以下语句即可: <link herf="css/style.c ...
最新文章
- dao加service加mysql实例_SpringBoot项目整合mybatis的方法步骤与实例
- 配置https后访问返回403 forbidden
- jquery $.each()函数编程实例五则图解
- 和6岁孩子的函数式编程对话
- Boost::context模块callcc的stack测试程序
- SuperAgent 中文乱码星号问号问题
- StoreServ的ASIC架构师必须面向未来做出决断
- linux sh 脚本调用外部命令
- 深度优先搜索与广度优先搜索———模板
- 如何在手机上编码python_如何在Python中进行热编码？
- 【技术】UEFI基础服务：系统表
- 相似度测试的软件,Plagiarism Checker X(文章相似度检测软件) V6.08 官方版
- java-php-python-ssm南京新东方学校家校通系统计算机毕业设计
- 网络私有云存储的几点优势
- 『杭电1206』劲乐团
- 高斯公式(div：点乘)
- Java IO中涉及到的哪些类以及哪些设计模式
- 通过爬虫在GEO数据库上获取对应SRR号
- Zigbee Zstack2.5.1a使用rfx2401+cc2530
- 一款国产的自动摘要在线工具-文皮皮