纯CSS3大海蓝天动画背景特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯CSS3大海蓝天动画背景特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>纯CSS3大海蓝天动画背景特效</title>
    <link type="text/css" rel="stylesheet" href="css/reset.css" />
    <link type="text/css" rel="stylesheet" href="css/theme.css" />
    <link type="text/css" rel="stylesheet" href="css/global.css" />
</head>
<body>
    <div class="sky"></div>
    <div class="sun">
        <div class="kernel"></div>
        <div class="shine"></div>
    </div>

    <div class="sea">
        <div class="bubble bubble1"></div>
        <div class="bubble bubble2"></div>
        <div class="bubble bubble3"></div>
        <div class="bubble bubble4"></div>
        <div class="bubble bubble5"></div>
        <div class="bubble bubble6"></div>
        <div class="bubble bubble7"></div>
        <div class="jellyfish jellyfish1">
            <div class="jellyfish_head"></div>
            <div class="jellyfish_tail">
                <div class="jellyfish_tail_in"></div>
            </div>
        </div>
        <div class="jellyfish jellyfish2">
            <div class="jellyfish_head"></div>
            <div class="jellyfish_tail">
                <div class="jellyfish_tail_in"></div>
            </div>
        </div>
    </div>
    <div class="page">
        <div class="main">
            <div class="content"></div>
        </div>
    </div>
</body>
</html>

CSS代码(global.css):

body,html{width:100%;height:100%;overflow:hidden;background:#fff;}
.page{width:100%;height:100%;position:relative;overflow:auto;z-index:99;}
.main{width:992px;height:100%;box-shadow:0 0 10px #218dc9;background:#fff;margin:0 auto;opacity:0.7;filter:alpha(opacity=70);overflow:auto;}

CSS代码(reset.css):

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

附件:下载该文件资源,减少时间成本(增值服务)