<!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. C语言关于利用sscanf实现字符串相加减

    #include<stdio.h>#include<string.h>void main(){ int a; int b; char str1[10] = "9999 ...

  2. C# .net dotnet属性定义属性，以提供显示明称，默认值

    //使用显示名称初始化 System.ComponentModel.DisplayNameAttribute 类的新实例. displayName 显示名称 [DisplayName("we ...

  3. openstack命令备忘录

    原文http://my.oschina.net/u/138210/blog/142661 查看rabbitmq 队列 rabbitmqctl list_queues 查看keystone的用户 key ...

  4. linux命令之tail

    tail用于输出文件末尾部分.一个比较有用的功能是tail + grep实现类似于安卓开发时调试使用的logcat,具体操作是: 一般我是用SecureCRT连接linux,然后使用SecureCRT ...

  5. [django]l利用xlrd实现xls文件导入数据

    代码: #coding:utf-8 import os os.environ.setdefault("DJANGO_SETTINGS_MODULE", "www.sett ...

  6. JAVA防盗链在报表中的应用实例

    今天我们来聊聊Java防盗链,多说无用,直接上应用案例. 这里所用的工具是报表软件FineReport,搭配有决策系统(一个web前端展示系统,主要用于权限控制),可以采用java防盗链的方式来实现页 ...

  7. Mybatis(综合案例)

    MyBatis本是apache的一个开源项目iBatis,2010年这个项目有Apache software foundation 迁移到了Google code,并改名MyBatis.2013年11 ...

  8. NYOJ 187

    快速查找素数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 现在给你一个正整数N,要你快速的找出在2.....N这些数里面所有的素数. 输入 给出一个正整数数N(N&l ...

  9. Hibernate入门案例及增删改查

    一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...

  10. 关于laravel基础知识

    laravel任务管理知识点 1.配置数据库环境 首先要找到congif/app.php,在这里会发现一些全局的系统设置,包括语言,时区等. 重要的是会发现前几个数组都使用了env()这个函数,这个时 ...