• 欢迎访问小辉博客,有访必回!广告为已更换为百度联盟,希望随手点下,虽然博客是兴趣所在,但也想有一个良性循环!请大家谅解!

HTML+CSS3实现天狗食日的效果

前端 小辉 676次浏览 已收录 0个评论 扫描二维码

html5+css3的天狗食日效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[传说中的“天狗食月”] - HTML5+CSS3实现(无图片)</title>
</head>
<body style="padding:0 !important;margin:0 !important;">
 
<div style="position:relative;overflow:hidden !important;padding:5px 0 !important;font:normal 13px/1.3 simsun,verdana !important;color:#FFFFFF !important;border:0 none !important;border-bottom:1px solid #2D2D2D !important;background:#393939 !important;"> 传说中的“天狗食月” 代码示例 </div>
<style>
body {overflow:hidden;background-color:#101010;}
#wrapper {position:absolute;top:100px;left:50%;width:200px;height:200px;margin-left:-100px;
    -webkit-animation-name: moonline;-webkit-animation-duration: 10s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;
    -moz-animation-name: moonline;-moz-animation-duration: 10s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes moonline {
    0% {top:220px;left:30%;opacity:0;}
    30% {top:100px;left:50%;opacity:1;}
    50% {top:100px;left:50%;opacity:1;}
    80% {top:100px;left:50%;opacity:1;}
    100% {top:220px;left:80%;opacity:0;}
}
@-moz-keyframes moonline {
    0% {top:220px;left:30%;opacity:0;}
    30% {top:100px;left:50%;opacity:1;}
    50% {top:100px;left:50%;opacity:1;}
    80% {top:100px;left:50%;opacity:1;}
    100% {top:220px;left:80%;opacity:0;}
}
#circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: #EFEFEF;
    -webkit-box-shadow:0 0 40px #FFFFFF;
    -moz-box-shadow:0 0 40px #FFFFFF;
    box-shadow:0 0 40px #FFFFFF;
    border-radius: 100px;
    -webkit-animation-name: moonright;-webkit-animation-duration: 10s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;
    -moz-animation-name: moonright;-moz-animation-duration: 10s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes moonright {
    0% {-webkit-box-shadow:0 0 10px #FFFFFF;}
    30% {-webkit-box-shadow:0 0 10px #FFFFFF;}
    40% {-webkit-box-shadow:0 0 20px #FFFFFF;}
    50% {-webkit-box-shadow:0 0 40px #FFFFFF;}
    60% {-webkit-box-shadow:0 0 20px #FFFFFF;}
    80% {-webkit-box-shadow:0 0 10px #FFFFFF;}
    100% {-webkit-box-shadow:0 0 10px #FFFFFF;}
}
@-moz-keyframes moonright {
    0% {-moz-box-shadow:0 0 10px #FFFFFF;}
    30% {-moz-box-shadow:0 0 10px #FFFFFF;}
    40% {-moz-box-shadow:0 0 20px #FFFFFF;}
    50% {-moz-box-shadow:0 0 40px #FFFFFF;}
    60% {-moz-box-shadow:0 0 20px #FFFFFF;}
    80% {-moz-box-shadow:0 0 10px #FFFFFF;}
    100% {-moz-box-shadow:0 0 10px #FFFFFF;}
}
 
 
#circle1 {
    display:block;
    content:"";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 202px;
    height: 202px;
    background-color: #101010;
    border-radius: 100px;
    -webkit-animation-name: moon;-webkit-animation-duration: 10s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;
    -moz-animation-name: moon;-moz-animation-duration: 10s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes moon {
    0% { left:-252px }
    30% { left:-252px }
    49% { left:0px;}
    51% { left:0px;}
    53% { left:0px;}
    80% { left:252px;}
    100% { left:252px;}
}
@-moz-keyframes moon {
    0% { left:-252px }
    30% { left:-252px }
    49% { left:0px;}
    51% { left:0px;}
    53% { left:0px;}
    80% { left:252px;}
    100% { left:252px;}
}
</style>
<div id="wrapper">
  <div id="circle"></div>
  <div id="circle1"></div>
</div>
</body>
</html>

代码演示

代码演示


小辉博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明HTML+CSS3实现天狗食日的效果

喜欢 (1)
[cnbzzh@qq.com]
分享 (0)
小辉
关于作者:
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址