div+css布局实现可爱海绵宝宝效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局实现可爱海绵宝宝效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    html{overflow-X:hidden;height:100%}html body{background-color:#1360D7;*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FF84E5DA',endColorstr='#FF2BA4F2');background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFiZGRlNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzEzNjBkNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background-size:100%;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#1bdde4),color-stop(100%,#1360d7));background-image:-moz-linear-gradient(top,#1bdde4 0,#1360d7 100%);background-image:-webkit-linear-gradient(top,#1bdde4 0,#1360d7 100%);background-image:linear-gradient(to bottom,#1bdde4 0,#1360d7 100%);position:relative;top:0;bottom:0;height:100%;width:100%;margin:auto;overflow:hidden}html body .sand{position:absolute;bottom:-105%;left:-10%;width:120%;height:1000px;-moz-border-radius:50% 50% 0 0/3% 3% 0 0;-webkit-border-radius:50%;border-radius:50% 50% 0 0/3% 3% 0 0;background:#D6C6AC;-moz-box-shadow:inset 0 20px 30px 0 rgba(0,0,0,0.3),0 -20px 30px 0 rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 20px 30px 0 rgba(0,0,0,0.3),0 -20px 30px 0 rgba(0,0,0,0.3);box-shadow:inset 0 20px 30px 0 rgba(0,0,0,0.3),0 -20px 30px 0 rgba(0,0,0,0.3)}:before,:after{content:"";position:absolute}.bob{position:absolute;bottom:40%;left:50%;margin-left:-90px;margin-top:20px;width:180px;height:200px}.bob .sponge{position:relative;height:150px;width:180px;z-index:20}.bob .sponge .shape{border-top:150px solid #FEFF37;border-left:15px solid transparent;border-right:15px solid transparent;height:0;width:150px;z-index:-1px}.bob .sponge .blobs span{position:absolute;width:15px;height:20px;background:#9EBC0E;border-radius:50%}.bob .sponge .blobs span:nth-of-type(1){top:10px;left:22px;-ms-transform:rotate(20deg);-webkit-transform:rotate(20deg);transform:rotate(20deg)}.bob .sponge .blobs span:nth-of-type(2){height:10px;width:8px;top:30px;left:14px;-ms-transform:rotate(20deg);-webkit-transform:rotate(20deg);transform:rotate(20deg)}.bob .sponge .blobs span:nth-of-type(3){bottom:25px;left:20px;-ms-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}.bob .sponge .blobs span:nth-of-type(4){height:10px;width:8px;bottom:15px;left:37px;-ms-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}.bob .sponge .blobs span:nth-of-type(5){bottom:10px;right:30px;-ms-transform:rotate(-140deg);-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}.bob .sponge .blobs span:nth-of-type(6){height:10px;width:8px;bottom:30px;right:20px;-ms-transform:rotate(-140deg);-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}.bob .sponge .blobs span:nth-of-type(7){top:12px;right:15px;-ms-transform:rotate(-140deg);-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}.bob .sponge>.top .waves,.bob .sponge>.left .waves,.bob .sponge>.bottom .waves,.bob .sponge>.right .waves{position:absolute;width:30px}.bob .sponge>.top .waves:before,.bob .sponge>.left .waves:before,.bob .sponge>.bottom .waves:before,.bob .sponge>.right .waves:before{height:4px;width:15px;border-top:2px solid #8F9416;background:#FEFF37;top:-3px;border-radius:20px;border-radius:20px 20px 0 0;-moz-border-radius:20px 20px 0 0;-webkit-border-radius:20px 20px 0 0}.bob .sponge>.top .waves:after,.bob .sponge>.left .waves:after,.bob .sponge>.bottom .waves:after,.bob .sp.........完整代码请登录后点击上方下载按钮下载查看