CSS3月食

最新推荐文章于 2024-07-14 22:49:30 发布

weixin_30530339

最新推荐文章于 2024-07-14 22:49:30 发布

阅读量130

点赞数

文章标签：开发工具 xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/xesam/archive/2011/12/11/2283712.html

版权

昨天据说是XXX什么的月食，于是学习CSS3的时候也实现一个，全当练手。

实现原理很简单，用一个大圆覆盖一个小圆···=。=·：

用基于webkit的浏览器测试，需要其他的浏览器可以更改对应的前缀（-webkit，-moz，-o）

演示地址：http://fronter.sinaapp.com/wp-content/demo/eclipse.html

最终效果：

demo：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        body{ background: #000;}
        #earth{position: relative; margin-top: 200px; }
        #moon{
            position: absolute; top:-90px; left: 50%; width: 180px; height: 180px; margin-left: -90px;
            border-radius: 100px;
            background: -webkit-gradient(linear, left bottom, right top, from(#BDA08D), to(#fff));
            box-shadow: 0 0 30px #D4D4D4;
        }
        #lovers{
            position: absolute;
            top:73px;
            border-radius: 0 0 0 90px;
            -webkit-transform:rotate(-1deg);
        }
        #dog{
            position: absolute; top:850px; left: 400px; width: 300px; height: 300px; border-radius: 150px; background: #000;
        }
        #orbit{
            position: relative; top:-1000px; width: 1000px; height: 1000px; margin: 0 auto; border-radius: 500px; 
            -webkit-animation-name:eclipse;
            -webkit-animation-duration:20s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-iteration-count:infinite;
        }
        @-webkit-keyframes eclipse{
            0%{-webkit-transform: rotate(-30deg);}
            20%{-webkit-transform: rotate(-15deg);}
            40%{-webkit-transform: rotate(0deg);}
            60%{-webkit-transform: rotate(15deg);}
            80%{-webkit-transform: rotate(30deg);}
            100%{-webkit-transform: rotate(45deg);}
        }
    </style>
</head>
<body>
<div id="earth">
    <div id="moon">
        <img id="lovers" src="http://images.cnblogs.com/cnblogs_com/xesam/341774/r_%E6%9C%AA%E6%A0%87%E9%A2%98-2.png" width="100" alt="" />
    </div>
    <div id="orbit">
        <div id="dog"></div>
    </div>
</div>
<script type="text/javascript">
var dog = document.getElementById('dog');

</script>
</body>
</html>

转载请注明来自小西山子【http://www.cnblogs.com/xesam/】
本文地址：http://www.cnblogs.com/xesam/archive/2011/12/11/2283712.html

转载于:https://www.cnblogs.com/xesam/archive/2011/12/11/2283712.html

weixin_30530339

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3月食

昨天据说是XXX什么的月食，于是学习CSS3的时候也实现一个，全当练手。实现原理很简单，用一个大圆覆盖一个小圆···=。=·：用基于webkit的浏览器测试，需要其他的浏览器可以更改对应的前缀（-webkit，-moz，-o）演示地址：http://fronter.sinaapp.com/wp-content/demo/eclipse.html最终效果：de...
复制链接

扫一扫

CSS3月食

“相关推荐”对你有帮助么？