用CSS3来实现一个H5的活动背景页

400 阅读2分钟

前言

最近在做一个简单的H5活动页,差不多两屏的大小,一般的活动页面背景都比较炫,不是很规律,今天这个案例很简单,单纯练手。先上图

分析

背景图片其实分为三个模块:两个斜角矩形+底部的弧线巨型,分出模块,我们就能一步步实现啦!

实现

  1. 先最外层写一个背景颜色,其次再写上三个模块,模块是绝对定位,浮在顶层,所以写了一个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>
  1. 模块一和模块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( ̄▽ ̄)ブ

git地址

github.com/lirongrong/…