前言
最近在做一个简单的H5活动页,差不多两屏的大小,一般的活动页面背景都比较炫,不是很规律,今天这个案例很简单,单纯练手。先上图
分析
背景图片其实分为三个模块:两个斜角矩形+底部的弧线巨型,分出模块,我们就能一步步实现啦!
实现
- 先最外层写一个背景颜色,其次再写上三个模块,模块是绝对定位,浮在顶层,所以写了一个1000px高的div来撑起整个页面
<style>
body{ margin:0;}
.pr{ position: relative;}
.pa{ position: absolute;}
.bg_orange{ background: #ed8048; max-width: 750px; margin:0 auto; overflow: hidden; }
</style>
<div class="bg_orange pr">
<div class="bg_modular_01 pa"></div>
<div class="bg_modular_02 pa"></div>
<div class="bg_modular_03 pa"></div>
<div style="height:1000px;">你的内容</div>
</div>
复制代码
- 模块一和模块2比较好实现,无非就是写个巨型,再旋转个角度,再接着写第三个模块,思路:
- 背景左右渐变
- 画三个不同颜色的椭圆叠在一起
- 第三个椭圆渐变
.bg_modular_03{ height: 12%; bottom:0; left:0; width:100%;overflow: hidden; background: linear-gradient(right,#df592b,#ee7930);background: -webkit-linear-gradient(right,#df592b,#ee7930);}
.bg_modular_030{ width: 180%; height: 360%; border-radius: 50%; background: #e96f2f; bottom:70%; left: -40%; z-index: 2; }
.bg_modular_031{ width: 160%; height: 320%; border-radius: 50%; background: #fff; bottom:65%; left: -30%; z-index: 1; }
.bg_modular_032{ width:180%; height: 360%; border-radius: 50%; bottom:60%; left: -40%; z-index: 0; background: linear-gradient(right,#ee7930,#df592b); background: -webkit-linear-gradient(right,#ee7930,#df592b);}
<div class="bg_modular_03 pa">
<div class="bg_modular_030 pa"></div>
<div class="bg_modular_031 pa"></div>
<div class="bg_modular_032 pa"></div>
</div>
复制代码
就这么简单o( ̄▽ ̄)ブ