太阳地球月亮运行动画（使用@keyframes）
闲来无事的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background: #000;
}
.sun{
width: 280px;
height: 280px;
margin-top: 200px;
margin-left: 300px;
border:1px solid #FFA500;
background:#FFA500;
border-radius: 50%;
box-shadow:0px 0px 35px #FFA500;
animation:action 10s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
@keyframes action{
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)}
}
.earth{
border:1px solid #0000CC;
background:#0000CC;
box-shadow:0px 0px 35px #0000CC;
width: 40px;
height: 40px;
border-radius: 50%;
margin-left: -90px;
animation:actions 5s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
@keyframes actions{
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)}
}
.moon{
border:1px solid #F0F0F0;
background:#F0F0F0;
box-shadow:0px 0px 35px #F0F0F0;
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: -20px;
}
</style>
</head>
<body> <div class="sun">
<div class="earth">
<div class="moon"></div>
</div>
</div> </body>
</html>
太阳地球月亮运行动画（使用@keyframes）的更多相关文章
- 关键帧动画：@keyframes
关键帧动画:@keyframes: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- 随着ScrollView的滑动，渐渐的运行动画View
今天是实现了一个小功能的东西.看看效果图: 实现方式: 1.自己定义ScrollView 复写onScrollChange方法,来计算滑动的位置. 2.自己定义接口,通过接口来在ScrollVie ...
- TranslateAnimation 运行动画后实际位置不正确问题
最近在调试android 动画时候发现一个很奇怪问题,网上搜索都说TranslateAnimation 动画运行后,实际位置要在动画结束的监听里面重新设置才会正确,不然物体位置还是在原位. 我根据网上 ...
- css3动画（@keyframes和animation的用法）
animation基本用法是: animation: name keeping-time animate-function delay times iteration final; 第一个参数:nam ...
- 8 cocos2dx加入场景切换效果，控制场景切换彻底完毕之后再运行动画
1 加入场景切换效果 供场景切换的类: CCTransitionJumpZoom CCTransitionProgressRadialCCW CCTransitionProgressRadial ...
- css动画 aniamtion & @keyframes
MDN-animation文档 animation: [name] [duration] [timing-function] [delay] [iteration-cont] [direction] ...
- discuz修改太阳，月亮，星星等级图标
想必大家都想修改一下默认的等级图标吧,刚才在论坛上看见很多大神的方法都是要修改文件的,不过为了安全起见需要事先备份好才改,这种方法是可行的,但可能有些新手站长不会修改,又或者改错了恢复不来,现在我教大 ...
- cocos2d-js 运行动画
1.添加动画缓存 //添加动画缓存 cc.spriteFrameCache.addSpriteFrames(res.bug_plist); this.spriteSheet = new cc.Spri ...
- Animations动画和Keyframes关键帧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Murano Weekly Meeting 2016.07.26
Meeting time: 2016.July.26 1:00~2:00 Chairperson: Nikolay_St, from Mirantis Meeting summary: 1.Masc ...
- LeetCode 881.救生艇（C++）
第 i 个人的体重为 people[i],每艘船可以承载的最大重量为 limit. 每艘船最多可同时载两人,但条件是这些人的重量之和最多为 limit. 返回载到每一个人所需的最小船数.(保证每个人都 ...
- pat1101. Quick Sort (25)
1101. Quick Sort (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CAO, Peng There is a ...
- Windows窗体应用开发1
1.Windows窗体的基本概念 2.Windows窗体应用程序 3.Windows窗体常见界面元素 4.Windows窗体中的事件处理 1.Windows窗体的基本概念 打开一个Window的系统应 ...
- jenkins构建&发布git托管的VS工程
顺便做个笔记,以防以后再踩坑:笔者用的是jenkins-1.620和git-2.7.2-64-bit.exe,操作系统是win10(本机) jenkins安装完成之后 如果想要配合git完成拉取代码. ...
- Chrome谷歌浏览器中js代码Array.sort排序的bug乱序解决办法
[现象] 代码如下: var list = [{ n: "a", v: 1 }, { n: "b", v: 1 }, { n: "c", v ...
- 从零开始的全栈工程师——js篇2.20（事件对象 冒泡与捕获）
一.复习 面向对象 1)单例模式 2)工厂模式 3)构造函数 ①类js天生自带的类 基类object function array number math boolean date regexp st ...
- sass文件转css时注释虽然支持中文，但是出现乱码的解决方法
sass文件转css时注释虽然支持中文,但是出现乱码的解决方法 Scss 注释中文报错问题(windows系统, 已解决)找到ruby的安装目录,里面也有sass模块,类似这样样的路径:F:\Prog ...
- sharepoint2010列表的分页实现迅雷样式效果
利用ListItemCollectionPosition和AspNetPage分页控件实现,效果图如下: 后台分页代码如下: #region 私有方法 /// <summary> /// ...
- 悟空crm-0.5.4 (OpenLogic CentOS7.2)
平台: CentOS 类型: 虚拟机镜像 软件包: 5kcrm0.5.4 centos7.2 lamp stack 5.6.22 commercial crm lamp 服务优惠价: 按服务商许可协议 ...