纯CSS绘图：我的经典制作-小桥流水人家

爱情小熊

更新博客了，很开心，因为有个她，下面的内容及其让单身狗不适应，请注意前方高能，谨慎前行！在用纯CSS绘制下面这些图的时候，有一些小故事。用纯的CSS绘图，我在网上寻找了许久，不知道要绘写什么，突然看到这两只小熊，因为那段时间刚刚恋爱，还处于热恋期，所以就想制作这个图，本身原图中间有一颗心的，给人一上一下的，但那时候还没有学animation动画，所以就没有做中间那个爱心了。后面制作好了还专门拿给女友看，她也很开心你，还要要求我以后给她弄个更难的。

两只熊看完了下面还有内容，还有故事（小桥流水篇）

小熊的HTML代码

<div id="wrap1"><div class="man"><div class="duzi"></div><div class="erduo1"></div><div class="erduo2"></div><div class="eye1"></div><div class="eye2"></div><div class="zuiba"></div><div class="zuiba2"></div><div class="zuiba3"></div><div class="bizi"></div><div class="duzi2"></div><div class="shou1"></div><div class="shou2"></div><div class="shou5"></div><div class="shou6"></div><div class="jiao1"></div><div class="jiao2"></div></div><div class="woman"><div class="duzi3"></div><div class="erduo3"></div><div class="erduo4"></div><div class="eye3"></div><div class="eye4"></div><div class="zuiba4"></div><div class="zuiba5"></div><div class="zuiba6"></div><div class="bizi2"></div><div class="duzi4"></div><div class="shou3"></div><div class="shou4"></div><div class="jiao3"></div><div class="jiao4"></div></div></div>

小熊的CSS代码

这一截代码有点长，我现在看都有点晕

 body{margin:0;background:#000;}#wrap1{width:1314px;height:520px;background:#B9EDF8;margin:52px auto;position:relative;z-index:-5;}.man{position:absolute;top:100px;left:50px;}.woman{position:absolute;top:90px;left:260px;}.duzi{width:100px;height:220px;background-color:#a9a9a9;position:relative;;}.erduo1{width:25px;height:35px;border-radius:50%;background-color:#a9a9a9;transform: rotate(-25deg);position:absolute;top:-20px;left:-5px;}.erduo1:before{content:"";width:8px;height:12px;border-radius:50%;background:#fff;position:absolute;top:5px;right:5px;}.erduo2{width:25px;height:35px;border-radius:50%;background-color:#a9a9a9;transform: rotate(25deg);position:absolute;top:-20px;right:-5px;}.erduo2:before{content:"";width:8px;height:12px;border-radius:50%;background:#fff;position:absolute;top:5px;right:5px;}.eye1{width:10px;height:10px;border-radius:50%;background-color:#333;position:absolute;top:20px;left:40px;z-index:2;}.eye2{width:10px;height:10px;border-radius:50%;background-color:#333;position:absolute;top:18px;left:80px;z-index:2;}.zuiba{width:70px;height:70px;border-radius:10px;background-color:#a9a9a9;transform: rotate(55deg);position:absolute;top:15px;right:-20px;}.zuiba2{content:"";width:25px;height:25px;border-left:4px solid #333;border-radius:50%;transform: rotate(-45deg);position:absolute;top:50px;right:5px;}.zuiba3{width:40px;height:60px;border-radius:100% 100% 100% 100%/100% 100% 50% 50%;background-color:#a9a9a9;transform: rotate(75deg);position:absolute;top:28px;right:-35%;}.bizi{width:25px;height:20px;border-radius:50%;background-color:#333;position:absolute;top:45px;right:-35px;}.duzi2{width:70px;height:112px;border-radius:50%;background-color:rgba(255, 255, 255, 0.8);position:absolute;bottom:20px;right:10px;}.shou1{/* width:120px;height:70px;border:20px solid #a9a9a9;position:absolute;border-radius:100% 100% 100%  20%;transform:rotate(-35deg);border-bottom:transparent;*/position:absolute;left:-65px;bottom:20px;background: none;width: 130px;height: 70px;border: solid 20px #000;border-color: #a9a9a9 transparent transparent transparent;border-radius: 50%/100% 100% 0 0;transform: rotate(-45deg);z-index:-1;}.shou2{width:20px;height:80px;background-color:#a9a9a9;position:absolute;bottom:40px;right:-31px;z-index:-2;transform:rotate(-45deg);}.shou5{width:24px;height:14px;background-color:#a9a9a9;border-radius:50%;position:absolute;bottom:39px;right:-55px;z-index:-1;transform:rotate(45deg);}.shou6{width:24px;height:13px;background-color:#a9a9a9;border-radius:50%;position:absolute;bottom:39px;right:-68px;z-index:5;transform:rotate(-45deg);}.jiao1{width:20px;height:70px;border-radius:0 0 5px 10px;background-color:#a9a9a9;position:absolute;bottom:-50px;}.jiao1:after{content:"";width:20px;height:70px;border-radius:0  0 10px 5px;background-color:#a9a9a9;position:absolute;left:6px;transform: rotate(10deg)}.jiao2{width:20px;height:70px;border-radius:0 0 10px 5px;background-color:#a9a9a9;position:absolute;bottom:-50px;right:0px;}.jiao2:after{content:"";width:20px;height:70px;border-radius:0  0 5px 10px;background-color:#a9a9a9;position:absolute;right:6px;transform: rotate(-10deg)}.duzi3{width:100px;height:220px;background-color:#fdc4b6;position:relative;;}.erduo3{width:22px;height:32px;border-radius:50%;background-color:#fdc4b6;transform: rotate(-25deg);position:absolute;top:-20px;left:-4px;}.erduo3:before{content:"";width:6px;height:10px;border-radius:50%;background:#fff;position:absolute;top:5px;right:7px;}.erduo4{width:22px;height:32px;border-radius:50%;background-color:#fdc4b6;transform: rotate(25deg);position:absolute;top:-20px;right:-4px;}.erduo4:before{content:"";width:6px;height:10px;border-radius:50%;background:#fff;position:absolute;top:5px;right:7px;}.eye3{width:10px;height:10px;border-radius:50%;background-color:#333;position:absolute;top:23px;right:40px;z-index:2;}.eye4{width:10px;height:10px;border-radius:50%;background-color:#333;position:absolute;top:18px;right:78px;z-index:2;}.zuiba4{width:70px;height:70px;border-radius:10px;background-color:#fdc4b6;transform: rotate(-55deg);position:absolute;top:16px;left:-20px;}.zuiba5{content:"";width:25px;height:25px;border-left:4px solid #333;border-radius:50%;transform: rotate(-135deg);position:absolute;top:50px;left:5px;}.zuiba6{width:40px;height:60px;border-radius:100% 100% 100% 100%/100% 100% 50% 50%;background-color:#fdc4b6;transform: rotate(-75deg);position:absolute;top:28px;left:-35%;}.bizi2{width:25px;height:20px;border-radius:50%;background-color:#333;position:absolute;top:45px;left:-35px;transform:rotate(10deg);}.duzi4{width:70px;height:112px;border-radius:50%;background-color:rgba(255, 255, 255, 0.8);position:absolute;bottom:20px;left:10px;}.shou3{/* width:120px;height:70px;border:20px solid #a9a9a9;position:absolute;border-radius:100% 100% 100%  20%;transform:rotate(-35deg);border-bottom:transparent;*/position:absolute;right:-65px;bottom:20px;background: none;width: 130px;height: 70px;border: solid 20px #000;border-color: #fdc4b6 transparent transparent transparent;border-radius: 50%/100% 100% 0 0;transform: rotate(45deg);z-index:-1;}.shou4{width:20px;height:120px;background-color:#fdc4b6;position:absolute;bottom:15px;left:-34px;transform:rotate(45deg);border-radius:0 0 10px 10px;z-index:-1;}.jiao3{width:20px;height:70px;border-radius:0 0 5px 10px;background-color:#fdc4b6;position:absolute;bottom:-50px;}.jiao3:after{content:"";width:20px;height:70px;border-radius:0  0 10px 5px;background-color:#fdc4b6;position:absolute;left:6px;transform: rotate(10deg)}.jiao4{width:20px;height:70px;border-radius:0 0 10px 5px;background-color:#fdc4b6;position:absolute;bottom:-50px;right:0px;}.jiao4:after{content:"";width:20px;height:70px;border-radius:0  0 5px 10px;background-color:#fdc4b6;position:absolute;right:6px;transform: rotate(-10deg)}

未完待续…

小桥流水人家

看到这幅图，也是如此平庸出奇，但是每幅图后面都有一个故事的，我也想讲一下我的故事，代码什么的，比我写的好的多了去了，故事最重要。

这个图开先并没有这么丰富的内容，只是几棵树，一个太阳，一个房子，还有草坪，云，其他的都是后面添加进去的，从一开始我就给这幅图取名叫小桥流水人家，非常有韵味嘛，正如马致远的天净沙·秋思，他那描述的是秋天嘛，我这是情窦初开的春天嘛。当绘制好前面的内容之后，没有水，没有人，没有桥，何来小桥流水人家？

两只熊是之前就做好的，于是我奇思妙想的把两只熊添加进去了，觉得画面还是不够丰富，我再在上面绘制了桥，河流，小鱼，和一直憨鸟。我当时真的挺佩服自己的，竟可以添加上去还能如此吻合，还应了我的标题：小桥流水人家。于是绘制完了之后，再一次将这两只小熊生活在一个蓝天白云，青山绿水，丝丝炊烟，有桥，有水，有人家的风光图发给了她。
随后学习了动画，再给下图添加了动图，只不过不是不用的animation动画，如下图所示，由于没有画画功底，不能将每一帧画出来，并不是逐帧动画，所以看起有点生硬，还能看得过去吧。

今天的故事就到此结束，请关注我的博客：Berlin_Rome,下回再给你讲其他的！

小桥流水人家的HTML代码

<div id="wrap"><div class="sun"></div><div class="bg1"></div><div class="bg2"></div><div class="tree1"></div><div class="tree2"></div><div class="home"><div class="wuding"></div><div class="chuangzi"></div><div class="yanchong"></div></div><div class="tree3"></div><div class="yun1"></div><div class="yun2"></div><div class="yun3"></div><div id="wrap1"><div class="man"><div class="duzi"></div><div class="erduo1"></div><div class="erduo2"></div><div class="eye1"></div><div class="eye2"></div><div class="zuiba"></div><div class="zuiba2"></div><div class="zuiba3"></div><div class="bizi"></div><div class="duzi2"></div><div class="shou1"></div><div class="shou2"></div><div class="shou5"></div><div class="shou6"></div><div class="jiao1"></div><div class="jiao2"></div></div><div class="woman"><div class="duzi3"></div><div class="erduo3"></div><div class="erduo4"></div><div class="eye3"></div><div class="eye4"></div><div class="zuiba4"></div><div class="zuiba5"></div><div class="zuiba6"></div><div class="bizi2"></div><div class="duzi4"></div><div class="shou3"></div><div class="shou4"></div><div class="jiao3"></div><div class="jiao4"></div></div></div><div id="he"><div class="heliu"><div class="yu1"><div class="yan1"></div><div class="weiba1"></div></div><div class="yu2"><div class="yan2"></div><div class="weiba2"></div></div><div class="yu3"><div class="yan3"></div><div class="weiba3"></div></div></div></div><div id="niao"><div class="st1"></div><div class="yj1"></div><div class="yj2"></div><div class="bz1"></div><div class="ed1"></div><div class="ed2"></div><div class="cb1"></div><div class="cb2"></div><div class="j1"></div><div class="j2"></div></div><div id="qiao"><div class="qiaogan1"></div><div class="qiaogan2"></div><div class="qiao3 q1"></div><div class="qiao4 q1"></div><div class="qiao5 q1"></div><div class="qiao6 q1"></div><div class="qiao7 q1"></div><div class="qiao8 q1"></div><div class="qiao9 q1"></div><div class="qiao10 q1"></div><div class="qiao11 q1"></div><div class="qiao12 q1"></div><div class="qiao13 q1"></div><div class="qiao14 q1"></div><div class="qiao15 q1"></div><div class="qiao16 q1"></div><div class="qiao17 q1"></div><div class="qiao18 q1"></div> </div><div class="shouye"><a href="显示隐藏.html">返回</a></div></div>

小桥流水人家CSS代码

*{box-sizing:border-box;}body{margin:0;}#wrap{width:1200px;height:700px;margin:20px auto;background-image:linear-gradient(#50C1E9,#B9EDF8 80%);position:relative;z-index:0;overflow:hidden;}.sun{position:absolute;left:300px;top:10px;width:60px;height:60px;border-radius:50%;background-image:radial-gradient(#ff0,#f0ca17);box-shadow:0 0 40px #ff0;}.bg1{width:1000px;height:400px;border-radius:50%;background:radial-gradient(at top right,#adbd37 20%,#588133 60%);position:absolute;bottom:-100px;left:-450px;transform:rotate(1deg);}.bg2{width:1400px;height:400px;border-radius:50%;background:radial-gradient(at top center,#adbd37 20%,#588133);position:absolute;bottom:-200px;right:-200px;transform:rotate(-10deg)}.tree1{width:200px;height:200px;border-radius:50%;background-image:radial-gradient(at top right,#adbd37,#30AE1E);position:absolute;left:-30px;top:130px;}.tree1:after{content:"";position:absolute;width:30px;top:190px;left:75px;border-right:6px solid transparent;border-left:6px solid transparent;border-top:none;border-bottom:100px solid #492711;background:linear-gradient(to left,#895B2E,#492711);}.tree2{width:50px;height:100px;border-radius:100% 100% 100% 100%/100% 100% 50% 50%;background-image:radial-gradient(at top center,rgb(28, 193, 123,.6),rgb(21, 146, 94));position:absolute;top:300px;left:300px;}.tree2:before{content:"";width:8px;height:45px;background-color:#492711;position:absolute;top:99px;left:20px;z-index:-1;}.home{width:180px;height:180px;background-color:#ebb481;position:relative;left:900px;top:350px;z-index:-1;}.wuding{border-top:none;border-right:120px solid transparent;border-left:120px solid transparent;border-bottom:100px solid #d14035;position:absolute;bottom:180px;left:-30px;}.yanchong{width:20px;height:50px;background:#d14035;position:absolute;bottom:200px;right:10px;}.chuangzi{width:30px;height:30px;background-color:#9BD7D5;position:absolute;top:20px;left:20px;border:5px solid #d14035;}.tree3{width:60px;height:140px;border-radius:50%;background-image:radial-gradient(at top center,rgb(137, 158, 102),rgb(72, 94, 36));position:absolute;top:320px;right:500px;}.tree3:before{content:"";width:10px;height:100px;background-color:#492711;position:absolute;bottom:-99px;left:25px;z-index:-1;}.yun1{width:100px;height:30px;border-radius:50%;background-color:#fff;position: absolute;top:20px;right:50px;transition:all 10s linear;}.yun2{width:60px;height:30px;border-radius:70%;background-color:#fff;position: absolute;top:30px;right:40px;transform:rotate(5deg);}#wrap1{position:relative;top:-20px;right:-40px;z-index:5;opacity:1;}body:hover #wrap1{top:50px;right:-600px;transition: all 10s linear;}.man{position:absolute;top:100px;left:50px;}.woman{position:absolute;top:90px;left:260px;}.duzi{width:100px;height:220px;background-color:#a9a9a9;position:relative;;}.erduo1{width:25px;height:35px;border-radius:50%;background-color:#a9a9a9;transform: rotate(-25deg);position:absolute;top:-20px;left:-5px;}.erduo1:before{content:"";width:8px;height:12px;border-radius:50%;background:#fff;position:absolute;top:5px;right:5px;}.erduo2{width:25px;height:35px;border-radius:50%;background-color:#a9a9a9;transform: rotate(25deg);position:absolute;top:-20px;right:-5px;}.erduo2:before{content:"";width:8px;height:12px;border-radius:50%;background:#fff;position:absolute;top:5px;right:5px;}.eye1{width:10px;height:10px;border-radius:50%;background-color:#333;position:absolute;top:20px;left:40px;z-index:2;}.eye2{width:10px;height:10px;border-radius:50%;background-color:#333;position:absolute;top:18px;left:80px;z-index:2;}.zuiba{width:70px;height:70px;border-radius:10px;background-color:#a9a9a9;transform: rotate(55deg);position:absolute;top:15px;right:-20px;}.zuiba2{content:"";width:25px;height:25px;border-left:4px solid #333;border-radius:50%;transform: rotate(-45deg);position:absolute;top:50px;right:5px;}.zuiba3{width:40px;height:60px;border-radius:100% 100% 100% 100%/100% 100% 50% 50%;background-color:#a9a9a9;transform: rotate(75deg);position:absolute;top:28px;right:-35%;}.bizi{width:25px;height:20px;border-radius:50%;background-color:#333;position:absolute;top:45px;right:-35px;}.duzi2{width:70px;height:112px;border-radius:50%;background-color:rgba(255, 255, 255, 0.8);position:absolute;bottom:20px;right:10px;}.shou1{/* width:120px;height:70px;border:20px solid #a9a9a9;position:absolute;border-radius:100% 100% 100%  20%;transform:rotate(-35deg);border-bottom:transparent;*/position:absolute;left:-65px;bottom:30px;background: none;width: 130px;height: 70px;border: solid 20px #000;border-color: #a9a9a9 transparent transparent transparent;border-radius: 50%/100% 100% 0 0;transform: rotate(-65deg);z-index:-1;}.shou2{width:20px;height:80px;background-color:#a9a9a9;position:absolute;bottom:40px;right:-31px;z-index:-2;transform:rotate(-45deg);}.shou5{width:24px;height:14px;background-color:#a9a9a9;border-radius:50%;position:absolute;bottom:39px;right:-55px;z-index:-1;transform:rotate(45deg);}.shou6{width:24px;height:13px;background-color:#a9a9a9;border-radius:50%;position:absolute;bottom:39px;right:-68px;z-index:5;transform:rotate(-45deg);}.jiao1{width:20px;height:70px;border-radius:0 0 5px 10px;background-color:#a9a9a9;position:absolute;bottom:-50px;}.jiao1:after{content:"";width:20px;height:70px;border-radius:0  0 10px 5px;background-color:#a9a9a9;position:absolute;left:6px;transform: rotate(10deg)}.jiao2{width:20px;height:70px;border-radius:0 0 10px 5px;background-color:#a9a9a9;position:absolute;bottom:-50px;right:0px;}.jiao2:after{content:"";width:20px;height:70px;border-radius:0  0 5px 10px;background-color:#a9a9a9;position:absolute;right:6px;transform: rotate(-10deg)}.duzi3{width:100px;height:220px;background-color:#fdc4b6;position:relative;;}.erduo3{width:22px;height:32px;border-radius:50%;background-color:#fdc4b6;transform: rotate(-25deg);position:absolute;top:-20px;left:-4px;}.erduo3:before{content:"";width:6px;height:10px;border-radius:50%;background:#fff;position:absolute;top:5px;right:7px;}.erduo4{width:22px;height:32px;border-radius:50%;background-color:#fdc4b6;transform: rotate(25deg);position:absolute;top:-20px;right:-4px;}.erduo4:before{content:"";width:6px;height:10px;border-radius:50%;background:#fff;position:absolute;top:5px;right:7px;}.eye3{width:10px;height:10px;border-radius:50%;background-color:#333;position:absolute;top:23px;right:40px;z-index:2;}.eye4{width:10px;height:10px;border-radius:50%;background-color:#333;position:absolute;top:18px;right:78px;z-index:2;}.zuiba4{width:70px;height:70px;border-radius:10px;background-color:#fdc4b6;transform: rotate(-55deg);position:absolute;top:16px;left:-20px;}.zuiba5{content:"";width:25px;height:25px;border-left:4px solid #333;border-radius:50%;transform: rotate(-135deg);position:absolute;top:50px;left:5px;}.zuiba6{width:40px;height:60px;border-radius:100% 100% 100% 100%/100% 100% 50% 50%;background-color:#fdc4b6;transform: rotate(-75deg);position:absolute;top:28px;left:-35%;}.bizi2{width:25px;height:20px;border-radius:50%;background-color:#333;position:absolute;top:45px;left:-35px;transform:rotate(10deg);}.duzi4{width:70px;height:112px;border-radius:50%;background-color:rgba(255, 255, 255, 0.8);position:absolute;bottom:20px;left:10px;}.shou3{/* width:120px;height:70px;border:20px solid #a9a9a9;position:absolute;border-radius:100% 100% 100%  20%;transform:rotate(-35deg);border-bottom:transparent;*/position:absolute;right:-65px;bottom:30px;background: none;width: 130px;height: 70px;border: solid 20px #000;border-color: #fdc4b6 transparent transparent transparent;border-radius: 50%/100% 100% 0 0;transform: rotate(65deg);z-index:-1;}.shou4{width:20px;height:120px;background-color:#fdc4b6;position:absolute;bottom:15px;left:-34px;transform:rotate(45deg);border-radius:0 0 10px 10px;z-index:-1;}.jiao3{width:20px;height:70px;border-radius:0 0 5px 10px;background-color:#fdc4b6;position:absolute;bottom:-50px;}.jiao3:after{content:"";width:20px;height:70px;border-radius:0  0 10px 5px;background-color:#fdc4b6;position:absolute;left:6px;transform: rotate(10deg)}.jiao4{width:20px;height:70px;border-radius:0 0 10px 5px;background-color:#fdc4b6;position:absolute;bottom:-50px;right:0px;}.jiao4:after{content:"";width:20px;height:70px;border-radius:0  0 5px 10px;background-color:#fdc4b6;position:absolute;right:6px;transform: rotate(-10deg)}#he{border-left:80px solid transparent;border-top:none;border-right:80px solid transparent;border-bottom:500px solid #B9EDF8;position:absolute;top:370px;left:150px;transform: rotate(73deg);}.heliu{position:relative;}.yu1{width:30px;height:30px;position:absolute;background-color:#ffa200;border-radius:80% 0;top:300px;right:10px;transform:rotate(-35deg);transition:12s linear;}body:hover .yu1{top:600px;right:14px;}.yan1{width:7px;height:7px;border-radius:50%;background-color:#333;position:absolute;top:14px;right:16px;box-shadow:-20px 7px 5px #eee,-30px 5px 5px 1px #fff;}.weiba1{border-top:none;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #ffa200;position:absolute;top:-7px;left:20px;transform:rotate(-142deg);}.yu2{width:30px;height:30px;position:absolute;background-color:#59be31;border-radius:80% 0;top:350px;right:10px;transform:rotate(-35deg);transition:11s linear;}body:hover .yu2{top:600px;right:-50px;}.yan2{width:7px;height:7px;border-radius:50%;background-color:#333;position:absolute;top:14px;right:16px;box-shadow:-20px 7px 5px #eee,-30px 5px 5px 1px #fff;}.weiba2{border-top:none;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #59be31;position:absolute;top:-7px;left:20px;transform:rotate(-142deg);}.yu3{width:24px;height:24px;position:absolute;background-color:#0d99da;border-radius:80% 0;top:400px;right:0px;transform:rotate(-35deg);transition:10s linear;}body:hover .yu3{top:600px;right:10px;}.yan3{width:5px;height:5px;border-radius:50%;background-color:#333;position:absolute;top:14px;right:16px;box-shadow:-20px 7px 5px #eee,-30px 5px 5px 1px #fff;}.weiba3{border-top:none;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #0d99da;position:absolute;top:-6px;left:17px;transform:rotate(-142deg);}#niao{position:absolute;top:500px;right:50px;transition:10s linear;}body:hover #niao{top:600px;right:400px;}.st1{width:100px;height:100px;border-radius:50%;background-color:#ffa200;position:relative;}.st1:after{content:"";width:50px;height:40px;background-color:#ecb953;border-radius:50%;position:absolute;z-index:3;bottom:0;left:25px;}.ed1{border-top:none;border-right:40px solid transparent;border-left:30px solid transparent;border-bottom:60px solid #ffa200;position:absolute;top:-20px;left:-10px;transform:rotate(-25deg);}.ed2{border-top:none;border-right:30px solid transparent;border-left:40px solid transparent;border-bottom:60px solid #ffa200;position:absolute;top:-20px;right:-10px;transform:rotate(25deg);}.yj1{width:30px;height:30px;border-radius:50%;background-color:#fff;position:absolute;top:20px;left:15px;z-index:2;}.yj1:after{content:"";width:16px;height:16px;background-color:#333;border-radius:50%;position:absolute;top:8px;left:8px;}.yj2{width:30px;height:30px;border-radius:50%;background-color:#fff;position:absolute;top:20px;right:15px;z-index:2;}.yj2:after{content:"";width:16px;height:16px;background-color:#333;border-radius:50%;position:absolute;top:8px;left:8px;}.bz1{border-bottom:none;border-right:10px solid transparent;border-left:10px solid transparent;border-top:10px solid #b97704;position:absolute;top:50px;left:40px;z-index:5;}.cb1{width:20px;height:50px;background-color:#ffa200;border-radius:50%;transform:rotate(45deg);position:absolute;bottom:15px;left:-10px;}.cb2{width:20px;height:50px;background-color:#ffa200;border-radius:50%;transform:rotate(-45deg);position:absolute;bottom:15px;right:-10px;}.j1{width:8px;height:12px;border-radius:50%;background-color:#b97704;position:absolute;bottom:1px;left:16px;}.j1:before{content:"";width:8px;height:12px;border-radius:50%;background-color:#b97704;position:absolute;bottom:2px;left:-5px;}.j1:after{content:"";width:8px;height:12px;border-radius:50%;background-color:#b97704;position:absolute;bottom:-2px;left:6px;}.j2{width:8px;height:12px;border-radius:50%;background-color:#b97704;position:absolute;bottom:1px;right:16px;}.j2:before{content:"";width:8px;height:12px;border-radius:50%;background-color:#b97704;position:absolute;bottom:2px;right:-5px;}.j2:after{content:"";width:8px;height:12px;border-radius:50%;background-color:#b97704;position:absolute;bottom:-2px;right:6px;}#qiao{position:absolute;left:-45px;bottom:50px;}.qiaogan1{position:relative;background: none;width: 600px;height: 70px;border: solid 20px #000;border-color: #da9008 transparent transparent transparent;border-radius: 50%/200% 200% 0 0;transform: rotate(10deg);}.qiaogan2{background: none;width: 570px;height: 65px;border: solid 20px #000;border-color: #da9008 transparent transparent transparent;border-radius: 50%/150% 150% 0 0;transform: rotate(10deg);position:absolute;bottom:100px;left:80px;}.qiao3{bottom:100px;left:20px;}.qiao4{bottom:99px;left:50px;}.qiao5{bottom:98px;left:80px;}.qiao6{bottom:97px;left:110px;}.qiao7{bottom:96px;left:140px;}.qiao8{bottom:95px;left:170px;}.qiao9{bottom:88px;left:200px;}.qiao10{bottom:83px;left:230px;}.qiao11{bottom:78px;left:260px;}.qiao12{bottom:73px;left:290px;}.qiao13{bottom:63px;left:315px;}.qiao14{bottom:58px;left:345px;}.qiao15{bottom:52px;left:375px;}.qiao16{bottom:45px;left:405px;}.qiao17{bottom:35px;left:430px;}.qiao18{bottom:25px;left:460px;}.q1{background: none;width: 200px;height: 40px;border: solid 20px;border-color: #da9008 transparent transparent transparent;border-radius: 50%/50% 50% 0 0;transform: rotate(-45deg);position:absolute;}.shouye a{display:block;color:#333;text-decoration:none;width:70px;height:30px;background-color:#fff;position:absolute;bottom:10px;right:10px;text-align:center;line-height:30px;}.shouye a:hover{background-color:#5EB309;color:#fff;}

今天的内容到此结束，谢谢大家观赏！