<!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. 初识JavaScript 变量, 操作符, 数组

    这里讲的不会太多, 因为所有的语言都是一样的, 一些基本的东西, 所以就随便写写. 变量 变量就是可变的量, 编程角度理解就是用于存储某种/某些数值的存储器. 我们可以把变量具象理解为一个盒子, 而我 ...

  2. CoreLocation定位技术

    CoreLocation框架可用于定位设备当前经纬度,通过该框架,应用程序可通过附近的蜂窝基站,WIFI信号或者GPS等信息计算用户位置.      iOS定位支持的3种模式.      (1)GPS ...

  3. 使用Objective-C 计算代码运行时间

    第一种:(最简单的NSDate) NSDate* tmpStartData = [NSDate date]; //You code here... double deltaTime = [[NSDat ...

  4. 配置git同时push到两个远端库的简单方法

    最近在写一个开源的论坛系统,在发布代码时选择了github和coding这两个平台,我手懒,不想敲两次git push了,所以说突然有了一个很奇怪的需求:用一条git push同时push到两个远端代 ...

  5. ORA-01157 & ORA-01110

    测试服务器做了RMAN还原后,发现告警日志文件有如下错误信息ORA-01110: data file 206: '/u04/epps/oradata/temp02.dbf'   Errors in f ...

  6. SQL Server 2008 标准版不支持Reporting Services的数据驱动订阅

    今天开发同事找我,说为什么Reporting Services服务器的报表管理的订阅选项里面只有"新建订阅"选项, 没有"数据驱动订阅"选项,说实话,我也基本上 ...

  7. CMS本质上是什么

    2015-121.数据可以任意取和构造,结构也很自由,不一定是“站点-栏目-文章-评论”.2.主要用于显示,前台不产生数据(评论.浏览次数除外).3.在模版进行循环.判断,也比后台写代码要方便很多很多 ...

  8. 使用EF自带的EntityState枚举和自定义枚举实现单个和多个实体的增删改查

    本文目录 使用EntityState枚举实现单个实体的增/删/改 增加:DbSet.Add = > EntityState.Added 标记实体为未改变:EntityState.Unchange ...

  9. 使用logminer挖掘日志，分析历史操作 系列一

    ===============STARTED==================================== 事件起因: 业务的人mail过来说是有张表记录的10K+的优惠码记录没了,要我们确 ...

  10. 萌新笔记——C++里将string类字符串（utf-8编码）分解成单个字（可中英混输）

    最近在建词典,使用Trie字典树,需要把字符串分解成单个字.由于传入的字符串中可能包含中文或者英文,它们的字节数并不相同.一开始天真地认为中文就是两个字节,于是很happy地直接判断当前位置的字符的A ...