纯css实现面包车公交车效果-html代码-BFW代码库

纯css实现面包车公交车效果

代码语言：html

代码描述：纯css实现面包车公交车效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.caravan{
position: relative;
margin : 0 auto;
margin-top: 150px;
width: 398px;
height: 235px;
background: linear-gradient(0deg, rgba(255,153,154,1) 2%, rgba(248,185,185,1) 3%, rgba(249,187,186,1) 4%, rgba(249,187,186,1) 6%, rgba(255,204,203,1) 44%, rgba(253,182,183,1) 45%, rgba(253,182,183,1) 46%, rgba(254,254,253,1) 47%, rgba(254,254,253,1) 84%, rgba(250,250,250,1) 100%);
border-radius: 45px;
    border-top-right-radius: 105px 169px;
   
}

.caravan::before{
  content: '';
  position: absolute;
  width: 390px;
  height: 500px;
  top: -100px;
  background-repeat: no-repeat;
      background-image: radial-gradient(ellipse, #cbcbcb 57%, transparent),radial-gradient(ellipse, #cbcbcb 57%, transparent),radial-gradient(ellipse, #808080 80%, transparent),radial-gradient(ellipse, #808080 80%, transparent), linear-gradient(0deg, rgba(230,230,230,1) 5%, rgba(157,157,157,0) 5%, rgba(127,127,127,0) 94%, rgba(230,230,230,1) 96%),linear-gradient(135deg, rgba(127,127,127,1) 2%, rgba(153,153,153,1) 2%, rgba(153,153,153,1) 24%, rgba(127,127,127,1) 24%, rgba(127,127,127,1) 48%, rgba(153,153,153,1) 48%, rgba(153,153,153,1) 86%, rgba(127,127,127,1) 86%, rgba(127,127,127,1) 100%), linear-gradient(135deg, rgba(127,127,127,1) 2%, rgba(153,153,153,1) 2%, rgba(153,153,153,1) 11%, rgba(127,127,127,1) 11%, rgba(127,127,127,1) 56%, rgba(153,153,153,1) 56%, rgba(153,153,153,1) 90%, rgba(127,127,127,1) 86%, rgba(127,127,127,1) 100%),linear-gradient(#e6e6e6,#e6e6e6),linear-gradient(#e6e6e6,#e6e6e6),linear-gradient(0deg, rgba(173,173,173,1) 1%, rgba(157,157,157,0) 0%, rgba(127,127,127,0) 99%, rgba(173,173,173,1) 100%),linear-gradient(90deg, rgba(1.........完整代码请登录后点击上方下载按钮下载查看