纯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;
}
今天的内容到此结束，谢谢大家观赏！
1214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
