使用jQuery和CSS3创建日夜场景切换动画

Day and Night: Creating a Scenery Animation with jQuery and CSS 随着太阳西坠，漫天云彩变成星星你，月牙慢慢升起。

教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2311
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<body>
    <div id="sky"></div>
    <div id="sun_yellow"></div>
    <div id="sun_red"></div>
    <div id="clouds"></div>
    <div id="ground"></div>
    <div id="night"></div>
    <div id="stars"></div>
    <div id="sstar"></div>
    <div id="moon"></div>
    <div id="title"></div>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/jQuerySceneryAnimation/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/jQuerySceneryAnimation/jquery.color.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#sun_yellow').animate({
                'top': '96%',
                'opacity': 0.4
            }, 12000, function() {
                $('#stars').animate({
                    'opacity': 1
                }, 5000, function() {
                    $('#moon').animate({
                        'top': '30%',
                        'opacity': 1
                    }, 5000, function() {
                        $('#sstar').animate({
                            'opacity': 1
                        }, 300);
                        $('#sstar').animate({
                            'backgroundPosition': '0px 0px',
                            'top': '15%',
                            'opacity': 0
                        }, 500, function() {
                            $('#title').animate({
                                'opacity': 1
                            }, 1000);
                            $('#back').animate({
                                'opacity': 1
                            }, 3000);
                        });
                    });
                });
            });
            $('#sun_red').animate({
                'top': '96%',
                'opacity': 0.8
            }, 12000);
            $('#sky').animate({
                'backgroundColor': '#4F0030'
            }, 18000);
            $('#clouds').animate({
                'backgroundPosition': '1000px 0px',
                'opacity': 0
            }, 30000);
            $('#night').animate({
                'opacity': 0.8
            }, 20000);
        });
    </script>
</body>

</html>

Day and Night: Creating a Scenery Animation with jQuery and CSS 随着太阳西坠，漫天云彩变成星星你，月牙慢慢升起。

教程

编辑器支持Emmet

快捷键

Day and Night: Creating a Scenery Animation with jQuery and CSS 随着太阳西坠，漫天云彩变成星星你，月牙慢慢升起。

教程

使用CSS3和jQuery创建的文字排版特效 - 雾化文本

使用CSS3和jQuery创建的文字排版特效 - 3D贴纸

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：