<!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. IOS开发基础知识--碎片25

    1:使用@protocol实现delegate和datasource模式 #import <UIKit/UIKit.h> @protocol MyViewDataSource,MyView ...

  2. 一个3D ar打飞机的游戏iOS源码

    这是国内目前第一款集合了AR实景,3D游戏和人脸识别的射击游戏,通过旋转和改变手机的角度与位置,所有的射击操作都靠手势来完成,目前所有的源码全部都在这里.appStore地址:https://itun ...

  3. MySQL查看数据库相关信息

    使用MySQL时,需要了解当前数据库的情况,例如当前的数据库大小.字符集.用户等等.下面总结了一些查看数据库相关信息的命令   1:查看显示所有数据库 mysql> show databases ...

  4. Linux服务器宕机案例一则

    案例环境 操作系统 :Oracle Linux Server release 5.7 64bit 虚拟机 硬件配置 : 物理机型号为DELL R720 资源配置 :RAM 8G Intel(R) Xe ...

  5. winform（四）——简单计算器制作

    效果图: 代码区: using System; using System.Collections.Generic; using System.ComponentModel; using System. ...

  6. SQL Server中使用PIVOT行转列

    使用PIVOT行转列 1.建表及插入数据 USE [AdventureDB] GO /****** Object: Table [dbo].[Score] Script Date: 11/25/201 ...

  7. WebAPi的可视化输出模式(RabbitMQ、消息补偿相关）——所有webapi似乎都缺失的一个功能

    最近的工作我在做一个有关于消息发送和接受封装工作.大概流程是这样的,消息中间件是采用rabbitmq,为了保证消息的绝对无丢失,我们需要在发送和接受前对消息进行DB落地.在发送前我会先进行DB的插入, ...

  8. 查看SQLserver编码格式的SQL语句

    SELECT COLLATIONPROPERTY('Chinese_PRC_Stroke_CI_AI_KS_WS', 'CodePage') 下面是查询结果: 简体中文GBK 繁体中文BIG5 美国/ ...

  9. 还来一篇说下json_value 以及 json_query 的应用 (3)

    上一篇说了一下openjson 的一些使用方法,这次再说一下在2016里面的查询取值,当然就是 json_query 和 json_value 这2兄弟了 首先 ) = '{"a" ...

  10. SQL Server 2008 R2——以特定符号出现的次数来判断当前内容所在的层次

    =================================版权声明================================= 版权声明:原创文章 禁止转载  请通过右侧公告中的“联系邮 ...