<!DOCTYPE html>
<html style="overflow: hidden">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
body
{
width: 100%;
height: 100%;
background-image: url("img/pop.jpg");
}
div
{
width:50px;
height: 50px;
border-radius:100% ;
background: #FFE100;
position: relative;
top:700px;
left: -120px;
box-shadow: 0 0 20px #FA940A, 0 0 50px #FF0000;
-webkit-animation:movie 10s linear infinite;/*动画名称 播放时间 播放动画的方式 动画播放次数*/
}
@-webkit-keyframes movie {
0%{
margin-left: 192px;
margin-top: -140px;
}
10%{
margin-left: 384px;
margin-top: -280px;
}
20%{
margin-left: 576px;
margin-top: -420px;
}
30%{
margin-left: 768px;
margin-top: -560px;
}
40%{
margin-left: 950px;
margin-top: -650px;
}
50%{
margin-left: 1142px;
margin-top: -700px;
}
60%{
margin-left: 1334px;
margin-top: -650px;
}
70%{
margin-left: 1426px;
margin-top: -560px;
}
80%{
margin-left: 1618px;
margin-top: -420px;
}
90%{
margin-left: 1810px;
margin-top: -280px;
}
100%{
margin-left: 2020px;
margin-top: -140px;
}
}

</style>
</head>
<body>

<div></div>

</body>
</html>

使用css3 实现太阳升起落下效果的更多相关文章

  1. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  2. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  3. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  4. 使用JS与CSS3的翻转实现3D翻牌效果

    之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...

  5. 推荐9款使用CSS3实现的超酷动画效果

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  6. css3帮你轻松实现圆角效果，不一样的前端页面。

    在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性 圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一.今天,小编为大家介绍CSS3提供的可以将矩形变为圆角 ...

  7. css3 边框、背景、文本效果

    浅玩CSS3 边框.背景.文本效果 一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h ...

  8. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  9. 16种基于 CSS3 & SVG 的创意的弹窗效果

    在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画, ...

随机推荐

  1. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  2. ArrayList 浅析示例

    package com.smbea.demo; import java.util.ArrayList; import java.util.Iterator; import java.util.List ...

  3. Zookeeper 原理

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现同步服务,配置维护和命名服务等.Zookeeper是hadoop的一个子项目,其 ...

  4. MVP ComCamp & GCR MVP Openday 2014

    今年的MVP Openday与往年不一样,加入了Community Camp环节,即社区大课堂.其主要形式是由MVP作为讲师提供包括Developer和IT Pro方向的课程,地点是在北京国际会议中心 ...

  5. C#委托的介绍(delegate、Action、Func、predicate) --转载

    来源:http://www.cnblogs.com/akwwl/p/3232679.html 委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递.事件是一种特殊的委托. 1 ...

  6. js字符串转为日期格式

    1. <script type="text/javascript"> //字符串转日期格式,strDate要转为日期格式的字符串 function getDate(st ...

  7. andrioid 分享到其它（短信，qq，微信等功能）

    public static void share(Context context, String text) { Intent intent = new Intent(Intent.ACTION_SE ...

  8. sql server 2012 数据引擎任务调度算法解析（上)

    微软在sql server 2012版本之后,引入了新的任务调度算法,这个算法与之前的版本有一些细微的差别.我在这里试着简单描述一下,一些基本概念就不再赘述了,比如NUMA.scheduler.wor ...

  9. linux mint17.2 安装fcitx输入法

    mint17刚出的时候,曾经在虚拟机上体验过. 现在决定好好学习linux,再加上实在是太萌mint,就在虚拟机上安装了mint17.2 开始配置fcitx输入法: 添加ppa: sudo add-a ...

  10. C#学习笔记-数据的传递以及ToolStripProgressBar

    代码: 方法一:窗体的代码-->可以直接通过预设的Click事件来实现控制进度条. public partial class Form1 : Form { public Form1() { In ...